Question

我有一个水平的ul-li导航。 li元素内部是锚元素。其中一些锚元素比其他元素具有更多的文本行，因此它们具有不同的高度，看起来非常糟糕。 li元素具有相同的高度（等于最高的锚元素）。

将锚元素高度设置为100％没有做任何事情。

我现在知道的解决方案： - 给锚元素一个固定的高度 - 使用JS缩放字体大小以确保所有锚元素只有一行文本 - 加载所有内容后，使用JS来均衡锚元素的高度

我想避免使用JS进行样式设置，并且我希望保持高度动态而不是固定，这样每次锚元素的内容可能会发生变化时我都不必手动更新css。

还有其他选择吗？

感谢。

Answer 1

尝试使用CSS3 Flex属性display:flex检查 DEMO 。

ul{display:flex}

ul li{

 width:100px; 
 display:inline-block; 
 border:1px solid red;
}

a{background:gold; display:block;}

Answer 2

CSS表格样式将在这里提供帮助

JSfiddle Demo

<强> HTML

<ul>
    <li><a href="#">Short text</a></li>
    <li><a href="#">Word</a></li>
    <li><a href="#">Long long long text</a></li>
    <li><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto alias.</a></li>
</ul>

<强> CSS

ul {
    display: table;
}

li {
    display: table-cell;
    border:1px solid grey;
    width:25%;
    vertical-align: middle;
    text-align: center;
}

a {
    text-decoration: none;
}

水平导航中相同高度的所有元素

2 个答案: