0

我正在尝试创建 css 选项卡。最初我尝试在 jsfiddle 进行编码，它工作正常。

http://jsfiddle.net/McZV9/1/

http://img.ctrlv.in.s3.amazonaws.com/img/5198a15694cbb.jpg

当我在我的博客中复制粘贴相同的内容时

我在选项卡和内容之间有一个空白空间。 http://img.ctrlv.in.s3.amazonaws.com/img/5198a1ba0ba44.jpg

我认为可能有一些类似的css导致了空白。但是没有css可以导致空白。忽略了这一点，我在任何地方都添加了!important。但是仍然有一个空白。Google chromes检查元素也没有给出任何提示。谁能帮帮我

这是基本代码

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

2 回答 2

1

问题不在于两者之间的空间ul。这是你的身高.tabs li a

将这些设置为：

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

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

在此处输入图像描述

于 2013-05-19T10:02:51.923 回答
0

因为上课tabs-content，空间来了。我在萤火虫中看到了

于 2013-05-19T10:01:15.040 回答