如何刪除2之間的空白 <ul> 的

Question

我試圖創建css tabs.Initially我嘗試在jsfiddle編碼，它工作正常。

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

當我復制內容時，將同樣的內容粘貼到我的博客中

標簽和內容之間沒有空格。 http://img.ctrlv.in.s3.amazonaws.com/img/5198a1ba0ba44.jpg

我認為可能有一些類似的CSS導致空白。但是沒有CSS可以引起空白。忽略這一點，我添加了!important eveywhere !important但是仍然有空白.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; }

在您的網站上進行了測試，結果如下所示：

在此處輸入圖片說明

Answer 2

由於類tabs-content ，空間來了。我在螢火蟲中看到它

如何刪除2之間的空白 <ul> 的

問題描述

2 個解決方案

解決方案1
1 已采納 2013-05-19 10:02:51

解決方案2
0 2013-05-19 10:01:15

如何刪除2之間的空白 <ul> 的

問題描述

2 個解決方案

解決方案1 1 已采納 2013-05-19 10:02:51

解決方案2 0 2013-05-19 10:01:15

解決方案1
1 已采納 2013-05-19 10:02:51

解決方案2
0 2013-05-19 10:01:15