我有一个水平的 ul-li 导航。 li 元素内部是 anchor 元素。其中一些 anchor 元素的文本行数比其他元素多，因此它们的高度不同，看起来很糟糕。 li 元素具有相同的高度(等于最高的 anchor 元素)。
将 anchor 元素高度设置为 100% 没有任何作用。
我目前知道的解决方案: - 给 anchor 元素一个固定的高度 - 使用JS缩放字体大小，保证所有 anchor 元素只有一行文字 - 加载所有内容后，使用 JS 来均衡 anchor 元素的高度
我想避免将 JS 用于样式目的，并且我希望保持高度动态而不是固定，这样我就不必在每次 anchor 元素的内容可能发生变化时手动更新 css。
还有其他选择吗？
谢谢。
最佳答案
尝试 CSS3 Flex 属性 display:flex 检查 DEMO .
ul{display:flex}
ul li{
width:100px;
display:inline-block;
border:1px solid red;
}
a{background:gold; display:block;}
关于html - 水平导航中的所有元素都在同一高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24404718/