我正在尝试创建 css 选项卡。最初我尝试在 jsfiddle 上编码并且它工作正常。
http://img.ctrlv.in.s3.amazonaws.com/img/5198a15694cbb.jpg
当我在我的 blog 中复制粘贴相同的内容时
我在选项卡和内容之间有一个空白区域。 http://img.ctrlv.in.s3.amazonaws.com/img/5198a1ba0ba44.jpg
我假设可能有一些类似的 css 导致空白。但是没有 css 可能导致那个空白。忽略它，我添加了 !important everywhere。但仍然有一个空白空间。谷歌浏览器检查元素也没有给出任何提示。任何人都可以帮助我
这是基本代码
<!DOCTYPE html>
<ul class="tabs clearfix">
<li><a href="#html" class="active">HTML</a></li>
<li><a href="#javascript">JavaScript</a></li>
<li><a href="#css">CSS</a></li>
</ul>
<ul class="tabs-content">
<li class="active" id="html">
grtgrtgrtg
</li>
<li id="javascript">
erfefr
</li>
<li id="css">
<p>Similar to the the CSS is used to style the tooltip, or info box.</p>
</li>
</ul>
CSS
.clearfix:before, .clearfix:after, .row:before, .row:after {
content:'\0020';
display:block;
overflow:hidden;
visibility:hidden;
width:0;
height:0
}
.row:after, .clearfix:after {
clear:both
}
.row, .clearfix {
zoom:1
}
.tabs {
display:block;
border-bottom:solid 1px #ddd;
zoom:1;
margin:24px 0 0 0;
padding:0
}
.tabs li {
display:block;
width:auto;
height:30px;
float:left;
margin:0;
padding:0;
text-indent:0;
list-style:none
}
.tabs li a {
display:block;
text-decoration:none;
width:auto;
height:29px;
line-height:30px;
border:solid 1px #ddd;
background:#f5f5f5;
font-size:13px;
-webkit-transition:color 1s ease;
-moz-transition:color 1s ease;
-o-transition:color 1s ease;
transition:color 1s ease;
border-width:1px 1px 0 0;
margin:0;
padding:0 20px
}
.tabs li a:hover {
background:#f0f0f0;
color:#111;
-webkit-transition:color .3s ease;
-moz-transition:color .3s ease;
-o-transition:color .3s ease;
transition:color .3s ease
}
.tabs li a.active {
background:#f8f8f8;
height:30px;
position:relative;
top:-4px;
padding-top:4px;
border-left-width:1px;
color:#111;
-webkit-border-radius:3px 3px 0 0;
-moz-border-radius:3px 3px 0 0;
border-radius:3px 3px 0 0;
margin:0 0 0 -1px
}
.tabs li:first-child a {
-moz-border-radius-topleft:3px;
-webkit-border-top-left-radius:3px;
border-top-left-radius:3px;
border-width:1px 1px 0
}
.tabs li:last-child a {
-moz-border-radius-topright:3px;
-webkit-border-top-right-radius:3px;
border-top-right-radius:3px
}
.tabs-content {
background:#f8f8f8;
color:#4c4c4c;
display:block;
border:solid 1px #ddd;
-webkit-border-radius:0 0 3px 3px;
-moz-border-radius:0 0 3px 3px;
border-radius:0 0 3px 3px;
border-width:0 1px 1px;
margin:0 0 24px -1px;
padding:20px 30px 10px 30px
}
.tabs-content li {
margin:0;
padding:0;
text-indent:0;
list-style:none
}
最佳答案
问题不在于两个 ul 之间的空格。这是你的 .tabs li a
将这些设置为:
.tabs li a { height: 30px; }
.tabs li a.active { height: 34px; }
在你的网站上测试过，它看起来像这样:
关于html - 如何删除 2 个 <ul> 之间的空格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16633410/