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まだ空のスペースがあります.ヒント。誰か助けてください

ここに基本的なコードがあります

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