javascript - JQuery UI 选项卡的 CSS 问题

Question

我正在尝试让此代码片段中的选项卡仅突出显示事件选项卡的顶部和悬停在其上的选项卡。不过您会注意到，当前代码有一个错误，选项卡下方出现了一条颜色。我似乎无法弄清楚如何摆脱它。我正在使用 JQuery UI 选项卡系统， anchor 标记似乎突出在 li 标记下方。关于如何消除此错误并缩小 li 与内容之间的差距的任何建议？

这是一个 fiddle :http://jsfiddle.net/nmbCu/

我说的是黄色标签。我知道图像未加载，但您可以看到图像下方有一条条子正在点亮。我希望那消失了。关于如何摆脱它和下面的深灰色线有什么建议吗？我基本上希望黄色标签系统位于浅灰色背景之上。

下面是一些相关的代码:

HTML

<section>
        <div class="tabs">
            <ul>
                <li><a href="#TVHE"><img alt="TV & Home Entertainment" src="images/thumb_TV_normal.png" /></a></li>
                <li><a href="#Headphones"><img alt="Headphones" src="images/thumb_Headphones_normal.png" /></a></li>
                <li><a href="#VAIO"><img alt="VAIO" src="images/thumb_Vaio_normal.png" /></a></li>
                <li><a href="#Tablet"><img alt="Tablet" src="images/thumb_Tablet_normal.png" /></a></li>
                <li><a href="#Reader"><img alt="Reader" src="images/thumb_Reader_normal.png" /></a></li>
                <li><a href="#PortElec"><img alt="MP3" src="images/thumb_MP3_normal.png" /></a></li>
                <li><a href="#Camera"><img alt="Cameras" src="images/thumb_Cameras_normal.png" /></a></li>
            </ul>

下面是 CSS 的一些相关部分:

section {
    background: rgb(187, 187, 187);
    width: 900px;
    padding-bottom: 50px;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

section p{
    color: rgb(102, 102, 102);
    font-family: Arial, sans-serif;
    line-height: 18px;
    font-size: 14px;
    margin-right: 20px;
}

section .tabs {
    background: rgb(187, 187, 187);
    width: 900px;
}

section .tabs ul{
    padding: 0;
}

section .tabs ul li{
    list-style-type: none;
    display: inline-block;
    margin-right: -3px;
    text-decoration: none;
}

section .tabs ul li a {
    text-decoration: none;
}

section .tabs ul li:hover{
    background: #FFF773;
}

section .tabs ul li.ui-tabs-active {
    background: #FFF100;
}

section div.tabs div.tabContent {
    width: 895px;
    background: #dddddd;
    text-align: center;
    margin-top: -20px;
    padding-bottom: 50px;
}

div.innerBox {
    background: #dddddd;
    margin: 25px 30px 50px;
    padding: 10px 10px 0;
    width: 800px;
}

Answer 1

像这样更新你的风格:

section div.tabs div.tabContent {
    /* other css properties */
    margin-top: -25px;
}

fiddle :http://jsfiddle.net/nmbCu/1/

编辑以解决您的评论，请参阅更新的 fiddle 。

http://jsfiddle.net/nmbCu/2/

我做了一些更改，因此您可能想要比较新旧 CSS。我也删除了负边距 - 基本上您是用它来补偿应用于子 div 的正边距，因此从中删除边距要容易得多。