我遇到了 ul
和 div
之间不需要的间隙的问题。也许你知道解决方案?
#tabs {
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
text-align: center;
font-size: 0;
}
#tabs li {
display: inline-block;
margin: 0 .5em 0 0;
}
#tabs a {
position: relative;
background: #ddd;
background-image: linear-gradient(to bottom, #fff, #ddd);
padding: .7em 3.5em;
float: left;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
border-radius: 5px 0 0 0;
box-shadow: 0 2px 2px rgba(0, 0, 0, .4);
font-size: 16px;
}
#content {
background: #fff;
padding: 2em;
height: 220px;
position: relative;
z-index: 2;
border-radius: 0 5px 5px 5px;
box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
width: 1100px;
margin-left: auto;
margin-right: auto;
}
<ul id="tabs">
<li><a href="#" name="tab1">First</a></li>
<li><a href="#" name="tab2">Second</a></li>
<li><a href="#" name="tab3">Random</a></li>
</ul>
<div id="content">
<div id="tab1">...</div>
<div id="tab2">...</div>
<div id="tab3">...</div>
</div>
这个问题发生在inline-block 添加之后。我搜索了解决方案,但我发现的是水平间隙(我通过在父选项卡中添加 font-size: 0;
来修复它)。也许有一些垂直间隙的解决方案?
最佳答案
在#content 中添加 float:left;上边距:0;
关于html - css 取消ul和div之间的空格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47927254/