Question

我正在尝试将导航栏放在页面顶部，但导航栏的宽度已自动设置为100％。

这是我的HTML代码：

<body>
    <div class="container">
        <div class="navBar">
            <li><a href="#">List Item #1</a></li>
            <li><a href="#">List Item #2</a></li>
            <li><a href="#">List Item #3</a></li>
            <li><a href="#">List Item #4</a></li>
            <li><a href="#">List Item #5</a></li>
        </div>
    </div>
</body>

这是我的CSS代码：

.container{
    width:75%;
    height:auto;
    margin:0 auto;
}
.navBar{
    width:auto;
    height:35px;
    margin:0 auto;
}

我还有其他方法可以做到这一点，所以“navBar”div会在身体的中心对齐吗？

Answer 1

首先，您的HTML无效。 li必须是ul

的孩子

ul和div是块级元素，因此自动100％宽，因此您必须对它们进行收缩包装。

一种方法是使用display:inline-block。

然后父元素上的text-align:center将使内容居中。由于您已在navBar元素上设置了高度，因此我假设您希望在li上使用相同的内容。

＆＃13;

.container {
  width: 75%;
  height: auto;
  margin: 0 auto;
  text-align: center;
}
.navBar {
  display: inline-block;
  height: 35px;
}
.navBar li {
  display: inline-block;
  list-style-type: none;
}

＆＃13;

<div class="container">
  <ul class="navBar">
    <li><a href="#">List Item #1</a>
    </li>
    <li><a href="#">List Item #2</a>
    </li>
    <li><a href="#">List Item #3</a>
    </li>
    <li><a href="#">List Item #4</a>
    </li>
    <li><a href="#">List Item #5</a>
    </li>
  </ul>
</div>

＆＃13;

Answer 2

我怀疑目前.navBar是display：block意味着它将填充100％的容器。

尝试将.navBar设置为显示：inline-block或float：left

Answer 3

使用margin：对具有宽度的对象执行auto会使其居中。

你走了：

＆＃13;

.container {
  width: 75%;
  height: auto;
  margin: 0 auto;
  background-color: red;
}
.navBar {
  width: 80%;
  margin: 0 auto;
  background-color: white;
}
li {
  width:18%;
  margin:auto;
  display: block;
  float: left;
  text-align:center;
}

＆＃13;

<body>
  <div class="container">
    <ul class="navBar">
      <li><a href="#">Item #1</a>
      </li>
      <li><a href="#">Item #2</a>
      </li>
      <li><a href="#">Item #3</a>
      </li>
      <li><a href="#">Item #4</a>
      </li>
      <li><a href="#">Item #5</a>
      </li>
    </ul>
  </div>
</body>

＆＃13;

Answer 4

正确标记

.navBar必须是ul而不是div，因为li的父级有效标记：）

问题

div和ul元素的默认显示为display: block。 display: block的元素将是其父元素宽度的100％，使margin: auto无效。您可以在元素上设置宽度以允许居中，但是如果/当内容更改时，这将会中断

修复

一个简单的解决方法是使用display: table，因为这样您就可以使用margin: auto使元素居中，而无需指定宽度，从而使代码更加健壮。

注意：确保从ul中删除默认填充，否则将无法正确居中。

以下示例：

＆＃13;

.container {
  width: 75%;
  margin: auto;
}

.navBar {
  height: 35px;
  margin: 0 auto;
  display: table;
  padding: 0;
}

.navBar li {
  display: inline-block;
  padding: 0 10px;
  list-style: none;
}

＆＃13;

<body>
  <div class="container">
    <ul class="navBar">
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
      <li><a href="#">Item 5</a></li>
    </ul>
  </div>
</body>

＆＃13;

尝试居中“navBar”，但宽度自动设置为100％

4 个答案:

正确标记

问题

修复

以下示例：