Question

我正在尝试创建css tabs.Initially我尝试在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 eveywhere.But仍然是一个空的空间.Google chromes inspect元素也没有提供任何提示。任何人都可以帮助我

这是基本代码

<!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
}

Answer 1

问题不在于两个ul之间的空间。这是.tabs li a

的高度

将这些设置为：

.tabs li a { height: 30px; }
.tabs li a.active { height: 34px; }

在您的网站上测试了它，它看起来像这样：

enter image description here

Answer 2

由于班级tabs-content，空间即将来临。我在萤火虫中看到它

如何删除2 <ul>之间的空格</ul>

2 个答案: