Updated JSFiddle

Question

我有一些使用以下格式的标签：

<ul id="tabs">
    <li class="active"><a href="#">One</a></li>
    <li class=""><a href="#">Two</a></li>
    <li class=""><a href="#">Three</a></li>
    <li class=""><a href="#">Four Long Word</a></li>
    <li class=""><a href="#">Five</a></li>
</ul>

但是，我不知道如何制作所有＆lt; li>相同的高度，使得当活动和颜色不同时，盒子看起来不会被忽视。

这是jsfidle：http://jsfiddle.net/BzTjb/9/

js代码来自另一个小提琴，它不是我在网站上使用的那个，它只是为了演示，因为它很简单。

Answer 1

尝试将display的{{1}}属性更改为li并删除table-cell，因此float: left的CSS将如下所示：< / p>

li

Updated JSFiddle

Answer 2

Four Long Word链接已封装，因为容器标签的固定宽度为300px。扩展此宽度将允许它以单行显示。然而，单独这样做不会是一个漂亮的，一步到位的解决方案;您可能还需要更改一些填充。由您来决定您想要它的外观。

或者，您可以尝试width: auto;为其提供响应宽度。

Answer 3

不要指定标签的像素宽度，只需使用width：auto，标签将根据内容使用正确的宽度。

ul#tabs {
    width: auto; list-style: none;
    display: block; clear: both;
}

Updated JSFiddle

Answer 4

你有很多选择，但都取决于你真正想要达到的目标。我通常会做以下事情：

li a {
    display: block;
    width: 300px; /* Or any width you want to fit your content */
    float: left;
    padding: 10px 15px;  /* All this is optional */
    margin-right: 15px; /* All this is optional */
}

或

li a {
    display: inline-block;
    width: 300px; /* Or any width you want to fit your content */
    padding: 10px 15px;  /* All this is optional */
    margin-right: 15px; /* All this is optional */
}

CSS列表，所以它的大小相同

4 个答案:

Updated JSFiddle