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上设置最小高度并删除

内的跨度的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来说太大了，所以当你减小窗口的高度时它会流出来。通过设置最小高度，您可以阻止这种情况发生

用CSS调整跨度的高度

1 个答案: