Question

我遇到标头div问题。当看到它似乎扩展到1000px，即使我不认为我已经在CSS中定义。我只想要左侧的导航和最右侧的徽标或文字。如何将其放置在里面或修复标题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>

Answer 1

将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>

如何在标题内定位div？

1 个答案: