CSS问题与JQuery UI标签 [英] CSS issue with JQuery UI Tabs

问题描述

我尝试取得此程式码片段中的分页，只突出显示活动分页的顶端和悬停在其上的分页。你会注意到，当前的代码有一个错误，在选项卡下方有一个色条。我似乎不知道如何摆脱它。我使用的JQuery UI标签系统，看起来像锚标签是伸出在li标签下面。关于如何摆脱这个错误，并缩小李和内容之间的差距的任何建议？

I'm trying to get the tabs in this code snippet to highlight just the top of the active tab and the tab that is being hovered over. You'll notice though, that the current code has a bug where there is a sliver of color appearing underneath the tab. I can't seem to figure out how to get rid of it. I'm using the JQuery UI tab system and it seems like the anchor tags are what is jutting out beneath the li tags. Any suggestions on how to get rid of this bug and close up the gap between the li's and the content?

这里是一个小提琴： http://jsfiddle.net/nmbCu/

这是黄色标签，我在说关于。我知道图像没有加载，但你可以看到在图像下面有一个条子是点亮。我想要走了。任何建议如何摆脱它和下面的暗灰色线？我基本上想让黄色标签系统坐在浅灰色背景的顶部。

It's yellow tabs that I'm talking about. I know the image isn't loading but you can see how there's a sliver underneath the image that is lighting up. I want that gone. Any suggestions on how to get rid of it AND the dark grey line beneath that? I basically want the yellow tab system sitting right on top of the light gray background.

这里是一些相关的代码：

Here's some of the relevant bits of code:

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的一些相关位：

And here's some of the relevant bits of 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;
}

推荐答案

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

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

编辑以处理您的评论，查看更新fiddle。

EDIT to address your comment, see the updated fiddle.

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

我进行了一些更改，因此您可能需要比较旧的和新的CSS。我已经删除了负边距 - 基本上你正在使用它来补偿应用于子div的正边距，因此更容易删除它的边距。

I've made a few changes so you might want to compare the old and new CSS. I've removed the negative margin too - basically you were using it to compensate a positive margin applied to the child div, so it is much easier to remove the margin from it.

这篇关于CSS问题与JQuery UI标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！