I'm using jQuery tabs, and I added some spans to the tab headers so I could use a background image. Here's the markup:
<ul>
<li><span class='tab_outer'><span class='tab_inner'><span class='tab'><a href="#orderInfo开发者_运维问答">
Order Info</a></span></span></span></li>
<li><span class='tab_outer'><span class='tab_inner'><span class='tab'><a href="#notes">
Notes</a></span></span></span></li>
<li><span class='tab_outer'><span class='tab_inner'><span class='tab'><a href="#eventLog">
Event Log</a></span></span></span></li>
</ul>
The problem: the text inside the anchors is displaying on the very bottom of the anchor's block. If I could just move it up like, three pixels, it'd be perfect. Here's all the CSS that I think is relevant:
.tab_outer, .tab_inner, .tab
{
display: inline-block;
font-size: 11px;
list-style: none;
}
.tab_outer
{
margin-bottom: -3px;
padding-right: 3px;
margin-top: 4px;
}
.tab_inner
{
margin-bottom: -1px;
padding-left: 3px;
}
.tab
{
margin-top: 0px;
padding: 0px 4px 0px 4px;
margin-bottom: -1px;
}
Try the line-height and vertical-align properties:
.tab_outer {
line-height: 32px; /* Put the corresponding size here */
vertical-align: middle;
}
Alternatively you can adjust the padding:
.tab_outer {
padding-bottom: 3px;
}
margin: 0px;
padding: 0px;
vertical-align: super;
精彩评论