Как разместить div внутри заголовка?

У меня возникли проблемы с заголовком div. При просмотре он, кажется, расширяется до 1000 пикселей, хотя я не думаю, что у меня это определено в css. Я просто хочу, чтобы навигация с левой стороны и логотип или слова на правой стороне. Как разместить его внутри или исправить div заголовка?Как разместить div внутри заголовка?

body { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
#container { 
 
    width: 100%; 
 
    height: auto; 
 
    background-color: gray; 
 
} 
 
#header { 
 
    width: 75%; 
 
    height: 50px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    background-color: white; 
 
} 
 
.navbar { 
 
    width: 25%; 
 
    height: 30px; 
 
} 
 
.navbar ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: white; 
 
} 
 
.navbar li { 
 
    float: left; 
 
} 
 
li a { 
 
    display: block; 
 
    color: red; 
 
    padding: 10px; 
 
} 
 
li a:hover { 
 
    background-color: #111; 
 
} 
 
.sitename { 
 
    float: right; 
 
} 
 
#content { 
 
    width: 75%; 
 
    height: 600px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    background-color: purple; 
 
} 
 
.box1 { 
 
    width: 25%; 
 
    height: 300px; 
 
    float: left; 
 
    background-color: red; 
 
} 
 
.box2 { 
 
    width: 25%; 
 
    height: 300px; 
 
    float: left; 
 
    background-color: orange; 
 
} 
 
.box3 { 
 
    width: 25%; 
 
    height: 300px; 
 
    float: left; 
 
    background-color: green; 
 
} 
 
#footer { 
 
    width: 75%; 
 
    height: 50px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    background-color: yellow; 
 
}

<div id="container"> 
 
    <div id="header"> 
 
    <div class="navbar"> 
 
     <ul> 
 
     <li><a href="#home">Home</a> 
 
     </li> 
 
     <li><a href="#news">News</a> 
 
     </li> 
 
     <li><a href="#contact">Contact</a> 
 
     </li> 
 
     <li><a href="#about">About</a> 
 
     </li> 
 
     </ul> 
 
     <div class="sitename">Hello</div> 
 
    </div> 
 

 
    </div> 
 
    <div id="content"> 
 
    <div class="box1"></div> 
 
    <div class="box2"></div> 
 
    <div class="box3"></div> 
 
    </div> 
 
    <div id="footer"></div> 
 
</div>

источник

2016-06-03 jonmo1990

Где ваш логотип? – JTrixx16

Итак, вы хотите, чтобы эти 3 красочных divs вставили в div '# header'? – JTrixx16

Установите ширину вашего navbar в 100% Добавить float:left на навигационной панели ссылки

  body { 
 
       margin: 0; 
 
       height: 100%; 
 
      } 
 
      #container { 
 
       width: 100%; 
 
       height: auto; 
 
       background-color: gray; 
 
      } 
 
      #header { 
 
       width: 75%; 
 
       height: 50px; 
 
       margin: auto; 
 
       background-color: white; 
 
      } 
 
      .navbar { 
 
       height: 30px; 
 
       width: 100%; 
 
       padding: 10px 0; 
 
      } 
 
      .navbar ul { 
 
       list-style-type: none; 
 
       margin: 0; 
 
       padding: 0; 
 
       overflow: hidden; 
 
       background-color: white; 
 
       float: left; 
 
      } 
 
      .navbar li { 
 
       float: left; 
 
      } 
 
      li a { 
 
       display: block; 
 
       color: red; 
 
       padding: 10px; 
 
      } 
 
      li a:hover { 
 
       background-color: #111; 
 
      } 
 
      .sitename { 
 
       float: right; 
 
       margin-right: 20px; 
 
      } 
 
      #content { 
 
       width: 75%; 
 
       height: 600px; 
 
       margin-left: auto; 
 
       margin-right: auto; 
 
       background-color: purple; 
 
      } 
 
      .box1 { 
 
       width: 25%; 
 
       height: 300px; 
 
       float: left; 
 
       background-color: red; 
 
      } 
 
      .box2 { 
 
       width: 25%; 
 
       height: 300px; 
 
       float: left; 
 
       background-color: orange; 
 
      } 
 
      .box3 { 
 
       width: 25%; 
 
       height: 300px; 
 
       float: left; 
 
       background-color: green; 
 
      } 
 
      #footer { 
 
       width: 75%; 
 
       height: 50px; 
 
       margin-left: auto; 
 
       margin-right: auto; 
 
       background-color: yellow; 
 
      }

<html> 
 

 
<head> 
 
    <title>Home</title> 
 
</head> 
 

 
<body> 
 
    <div id="container"> 
 
    <div id="header"> 
 
     <div class="navbar"> 
 
     <ul> 
 
      <li><a href="#home">Home</a> 
 
      </li> 
 
      <li><a href="#news">News</a> 
 
      </li> 
 
      <li><a href="#contact">Contact</a> 
 
      </li> 
 
      <li><a href="#about">About</a> 
 
      </li> 
 
     </ul> 
 
     <div class="sitename">Hello</div> 
 
     </div> 
 

 
    </div> 
 
    <div id="content"> 
 
     <div class="box1"></div> 
 
     <div class="box2"></div> 
 
     <div class="box3"></div> 
 
    </div> 
 
    <div id="footer"></div> 
 
    </div> 
 
</body> 
 

 
</html>

источник

2016-06-03 03:01:16 keziah

Здравствуйте. Это сработало. Благодарю. Что вы сделали, чтобы исправить это? – jonmo1990

Как разместить div внутри заголовка?

ответ

Смежные вопросы