Question

我希望有人可以向我建议为什么li标签没有显示在同一行上，并带有以下标记。我不是在说我的标记是正确的，只是为什么它不起作用。

body {
  width: 100%;
  margin: 0 auto;
  padding: 0 auto;
}

ul {
  float: right;
  border: 1px solid black;
  width: 100%;
  padding: 0;
}

ul li {
  display: inline-block;
  width: 20%;
  border: 1px solid black;
  text-align: center;
  list-style-type: none;
}

ul li a {
  display: block;
}

<body>
  <header>
    <ul id="nav">
      <li><a href="home">Home</a></li>
      <li><a href="home">About Us</a></li>
      <li><a href="home">Infomration</a></li>
      <li><a href="home">Additional</a></li>
      <li><a href="home">Contact</a></li>
    </ul>
  </header>
</body>

我正在努力缠住头，将ul的宽度设置为100％，为什么然后将5 li标签的宽度设置为20％，它只能容纳4条直线，将其余部分推入下方的li标签。

我可以使用display：table等将导航栏显示在一行上，但是为什么上面的方法不起作用？

很抱歉，如果我提出的问题不对。

谢谢。

Answer 1

您确实应该考虑创建horizontal nav bars with flexbox。这里的问题是浏览器正在li元素之间渲染“不可见空间”，因为它们位于html文档的不同行上。您可以通过以下注释解决该问题：

<ul id="nav">
    <li><a href="home">Home</a></li><!--
    --><li><a href="home">About Us</a></li><!--
    --><li><a href="home">Infomration</a></li><!--
    --><li><a href="home">Additional</a></li><!--
    --><li><a href="home">Contact</a></li>
</ul>

Answer 2

除了@Brians的答案外，首先，我同意，请使用flexbox，但如果保留代码，则应使用边框进行计算。因此，在CSS中，要么更正宽度：

ul li {
  ...
  width: calc(20% - 2px);  /* 2 x 1px border */
  ...
}

或使用其他不考虑边框的框大小模型：

ul li {
  ...
  box-sizing: border-box;
  ...
}

Answer 3

正如Brian所提到的，li元素之间存在不可见的空间。除此之外，您还必须使用box-sizing属性：

ul li {
    box-sizing: border-box;
}

使用此属性和此值，元素的边框将包含在width: 20%中，而不是添加到元素中。

Answer 4

问题是li标记之间存在空格（以HTML中的换行符形式），并且由于它们是inline-block，因此该空格被呈现为空格字符，这会占用布局中的水平空间。

一种解决方案是使用flexbox而不是display: inline-block将li彼此相邻放置。

快速演示：

body {
    width: 100%;
    margin: 0 auto;
    padding: 0 auto;
}

ul {
    border: 1px solid black;
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center
}

ul li {
    flex: 1 1 20%;
    border: 1px solid black;
    text-align: center;
    list-style-type: none; 
}

ul li a {
    display: block;
}

<body>
  <header>
  <ul id="nav">
      <li><a href="home">Home</a></li>
      <li><a href="home">About Us</a></li>
      <li><a href="home">Infomration</a></li>
      <li><a href="home">Additional</a></li>
      <li><a href="home">Contact</a></li>
  </ul>
  </header>
</body>

有关如何在CSS-Tricks上使用flexbox的更多信息

如果由于某种原因您绝对必须使用inline-block，那么这种方法（强烈建议您不要使用），以这种方式使布局有效或不依赖HTML的少量细节是一种不好的做法）是通过将所有li元素放在同一行或注释掉空白来删除HTML中的空白，即

<li>...</li><li>...</li><li>...</li>

或

<li>...</li><!--
--><li>...</li><!--
--><li>...</li>

同样，这是一种不好的做法，因为如果您以这种方式进行操作，对HTML的更改（像添加这些空格一样简单）将破坏您的布局，但出于完整性考虑，我想将其包含在我的答案中，因为这是您的一种方式如果您确实必须使用inline-block样式（即不能更改CSS而是只能更改HTML的人），则可以使它们起作用，并且可以帮助说明问题所在。

显示水平导航栏的内嵌<li>标签的问题

4 个答案: