Question

我正在尝试获取此代码段中的标签，以突出显示活动标签的顶部和正在悬停的标签。但是你会注意到，当前的代码有一个错误，在选项卡下面出现了一些颜色。我似乎无法弄清楚如何摆脱它。我正在使用JQuery UI选项卡系统，似乎锚标签是在li标签下突出的东西。关于如何摆脱这个错误并缩小li和内容之间差距的任何建议？

这是一个小提琴：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;
}

小提琴：http://jsfiddle.net/nmbCu/1/

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

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

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

JQuery UI选项卡的CSS问题

1 个答案: