0

html

<ul id="tabs">
<li><a href="#tab-1" class="active">Tab-1</a></li>
<li><a href="#tab-2">Tab-2</a></li>
<li><a href="#tab-3">Tab-3</a></li>
</ul>
<div class="tab-contents" id="tab-1" style="display: block;">
    some text
</div>

css

.tab-contents{
    background: #2b2a26;
    padding: 0px 8px;
    clear: both;
}


#tabs {
    border-collapse: separate;
    border-spacing: 4px 0;
    float: right;
    list-style: none outside none;
    margin: 0 -4px 0 0;
    padding: 0;
}
#tabs li {
    background: none repeat scroll 0 0 #000000;
    border-radius: 19px 19px 0 0;
    display: table-cell;
    height: 47px;
    margin: 0 4px;
    text-align: center;
    vertical-align: middle;
    width: 145px;
}

#tab-1:before{
    content: "";
    display: block;
    width: 200px;
    height: 200px;
    background: #f00;
    padding-top: 10px; /* not working as expected but giving padding to bottom */
}

演示

在灰色框内，红色框应表现为填充顶部。我怎样才能做到这一点？

4

2 回答 2

2

您可以使用 padding-top 来.tab-contents代替。

.tab-contents{
    background: #2b2a26;
    padding: 0px 8px;
    clear: both;
    padding-top: 10px;
}

演示

或者，您可以使用position: relative; top: 10px; to your#tab-1:before而不是 padding-top。

演示

于 2013-07-30T04:27:42.827 回答
1

您的意思是使用margin-top而不是padding-top？

http://jsfiddle.net/SmN28/4/

于 2013-07-30T04:27:11.327 回答