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中的任何元素，它会将文本扩展为800px吗？

enter image description here

我无法使用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方法更为理想。

Answer 2

此SO帖子应该对您需要的内容有用

CSS - horizonal navigation list items to fill all available spce

你的CSS可能是这样的：

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

Answer 3

只是为了好玩，另一种不使用display: table的方法就是取消最后的<li>并给它overflow: hidden;：

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="utf-8" />
    <style>
        .wrapper {width: 800px; margin: 0 auto;}

        ul {list-style: none; margin:0; padding:0;}

        ul li {float: left;}

        ul li.last {float: none; overflow: hidden;}

        li a {
            color: #222;
            text-decoration: none;
            display: block;
            line-height: 1.5em;
            background: #e7e7e7;
            padding: 0 62px;
        }

        li.last a {padding: 0; text-align: center;}

        li a:hover, li a:focus {background: #222; color: #fff;}
    </style>
</head>
<body>
    <div class="wrapper">
        <ul>
            <li><a href="#">Lorem</a></li>
            <li><a href="#">ipsum</a></li>
            <li><a href="#">dolor</a></li>
            <li><a href="#">sit</a></li>
            <li class="last"><a href="#">amet</a></li>
        </ul>
    </div>
</body>
</html>

当然，可以使用class="last"而不是li:last-child，但是该类使其稍微向后兼容。它确实依赖于固定宽度的设计，这些日子有点过时了。

如何将LI扩展到DIV的全宽

3 个答案: