1

这是我的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 相同的大小，即 800 像素。我不能这样做，margin-left因为margin-right它会留下空白或移动li到我不想要的另一行。

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

在此处输入图像描述

我不能使用word-spacing，因为 s 中的某些东西li不止一个词。

4

3 回答 3

5

您已将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方法更可取。

于 2013-04-30T13:17:56.190 回答
5

这个 SO post 应该对你需要的有用

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

你的 CSS 可能是这样的：

 #menu ul {
        list-style: none;
        margin:0;
        padding:0;
        display: table;
        width: 100%;
    }
    #menu li {
        text-align: center;
        display: table-cell;
    }
于 2013-04-30T13:19:13.057 回答
0

只是为了好玩，另一种不这样做的方法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但该类使它稍微向后兼容。不过，它确实依赖于固定宽度的设计，现在这种设计有点过时了。

于 2013-04-30T14:00:23.353 回答