如何将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它是800像素宽.我希望将UL内部的文本扩展为与#menu相同的大小,即800px.我不能这样做margin-left,margin-right因为它留下了空格,或者它移动li到我不想要的另一条线上.

那么我可以添加到CSS中的任何元素,它会将文本扩展到800px吗？

我无法使用,word-spacing因为lis中的某些内容有多个单词.

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%.这将在右侧给你一点空间,可以通过居中对齐列表容器来调整.

编辑:正如法格尔所指出的那样,inline-block元素有一种令人讨厌的习惯,即让格式空间显示出来,因此block+ float方法更为理想.

Answer 2

这个 SO 帖子应该对你需要的东西有用

CSS - 用于填充所有可用 spce 的水平导航列表项

你的 css 可能是这样的：

 #menu ul {
        list-style: none;
        margin:0;
        padding:0;
        display: table;
        width: 100%;
    }
    #menu li {
        text-align: center;
        display: table-cell;
    }