html - 如何将 LI 扩展到 DIV 的全宽

Question

这是我的html代码:

<div id="menu">
 <ul>
  <li>Home</li>
  <li>My blah</li>
  <li>Lorem ipsum</li>
  <li>Dolor amet</li>
  <li>photogallery</li>
 </ul>
</div>

这是我的 CSS:

#menu li {
 display: inline;
 list-style-type: none;
}

#menu 位于 #header-wrap 中，宽度为 800px。我想将 UL 中的文本扩展为与 #menu 相同的大小，即 800px。我不能用 margin-left 和 margin-right 来做到这一点，因为它会留下空格或将 li 移动到我不喜欢的另一行'想要。

那么是否有任何元素可以添加到 CSS 中并将文本扩展到 800 像素？

我不能使用 word-spacing 因为 li 中的某些东西有多个单词。

Answer 1

您已将 display 属性指定为 inline。内联元素将折叠到其内容的宽度。

如果您希望它设置宽度，请将 display 更改为 block 或 inline-block。

#menu li {
 display: inline-block; /*compensate for spaces in the source if using this*/
 width: 20%; /* for 5 li's (100%/5)*/
 margin: 0;
 padding: 0;
 text-align: center; /* optional */
 list-style-type: none;
}



#menu li {
 display: block;
 float: left;
 width: 20%; /* for 5 li's (100%/5)*/
 margin: 0;
 padding: 0;
 text-align: center; /* optional */
 list-style-type: none;
}

编辑:对于 7 个 LI，将宽度百分比更改为 14.25%。这将为您在右侧留出一点空间，可以通过将列表容器居中对齐来进行调整。

编辑:正如 FAngel 所指出的，inline-block 元素有一个烦人的习惯，就是让格式化空格显示出来，因此 block + float 方法更可取。