css - 使用 CSS 调整跨度的高度

Question

我正在尝试为移动着陆站点制作菜单。 我遇到的问题是 div 内的元素被设置为比包含的 div 大的高度，这会破坏垂直对齐。为了手动设置高度，我尝试了很多不同的方法，但没有任何效果。我也试过将边距和填充设置为 0。没有任何效果。

代码:

<div id="menu">
    <div><span><h4><a class="menuItem" href="find-us.html">Find us</a></h4></span></div>
    <div><span>Promos</span></div>
    <div><span>Events</span></div>
    <div><span>Gallery</span></div>
</div>

http://jsfiddle.net/milkman15/r6VDe/1/

Answer 1

您可以在 div 上设置最小高度并删除内部 span 的 css

http://jsfiddle.net/mx28a/1/

#menu div{
    font-size:2.5em;
    width:93%;
    height:14%;
    margin-top:7%;
    display:inline-block;
    background:rgba(000,000,000,0.6);
    text-transform:uppercase;
    min-height: 60px;
}

我将最小高度添加为最后一项。由于 div 是使用百分比设置的，因此当屏幕的高度变小时，您的 div 的高度也会变小。你的字体对于 div 来说太大了，所以当你降低窗口的高度时它会溢出。通过设置最小高度，您可以阻止这种情况发生