Question

我已经实现了这个功能内容滑块： http://demo.webdeveloperplus.com/featured-content-slider/

Navigaion LI之间似乎有空间，我无法确定如何消除这个空间：问题出在我的开发网站上：http://www.virtualpetstore.com/green.aspx

然而，在我的JSFiddle工作中，这看起来很好 - 没有任何空间： http://jsfiddle.net/NinjaSk8ter/6WXkM/

以下是问题的说明： enter image description here

黄色和蓝色的Div不会造成这个空间。此外，这个1px的底部填充在特色ul.ui-tabs-nav li中与该空间无关：

 #featured ul.ui-tabs-nav li{ 
    padding:0 0 1px 15px;        
    color:#666;
    /*background-color:red;*/
 }



#featured{ 
    width:546px; 
    position:relative; 
    border:2px solid #ccc; 
    height:260px;
    /*height:255px;*/
    background:#ffffff;
    background:yellow;
}
    #featured ul.ui-tabs-nav{ 
    position:absolute; 
    list-style:none; 
    padding:0 0 0 0; 
    margin:0 0 0 368px; 
    width:178px;
    /*height:255px;*/
    height:245px;
    background-color:blue;
}
#featured ul.ui-tabs-nav li{ 
    padding:0 0 1px 15px;        /*left is distance between pointer and lis*/ 
    color:#666;
    /*background-color:red;*/
}
#featured ul.ui-tabs-nav li img{ 
    float:left; 
    margin:3px 2px 0 3px; 
    padding:1px; 
    border:1px solid #080808;
    /*background:olive;*/
}
#featured ul.ui-tabs-nav li span{ 
    font-size:8px;              /*font size of text nav li boxes*/
    padding:0;
}
#featured li.ui-tabs-nav-item a { 
    display: block;
    /*height: 59px;*/
    height:60px;               /*height of nav li boxes*/
    font-family:Verdana;
    color:#333;  
    background:#fff; 
    line-height:9px;            /*distance between anchor tag text*/
    /*text-decoration:none;*/
}
#featured li.ui-tabs-nav-item a:hover{ 
    background:#f2f2f2; 
}

#featured li.ui-tabs-selected{ 
    background:url("/images/Green/GreenSlider/selected-item.gif") top left no-repeat;  
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{ 
    background-color:#CCCCCC; 
}
#featured .ui-tabs-panel{ 
    width:368px; 
    height:255px;
    position:relative;
    /*background-color:orange;*/
}
#featured .ui-tabs-panel .info{ 
    position:absolute; 
    top:209px; 
    height:46px; 
    background: url("/images/Green/GreenSlider/transparent-bg.png"); 
}
#featured .info h2{ 
    font-size:13px; 
    font-family:verdana; 
    color:#FFFFFF; 
    padding:3px 0 0 4px; 
    overflow:hidden; 
}
#featured .info p{ 
    margin:0 0 0 5px;
    font-family:Arial; 
    font-size:12px; 
    line-height:13px; 
    color:#f0f0f0;
}
#featured .info a{ 
    text-decoration:none; 
    color:#fff; 
}
#featured .info a:hover{ 
    text-decoration:underline; 
}
#featured .ui-tabs-hide{ 
    display:none; 
}

Answer 1

查看Firebug，您需要删除此CSS （第484行）：

#mid-feature-client li {
    margin-bottom: 4px;
}

或者，如果您需要其他东西（似乎很可能），您可以通过添加以下内容来解决此问题：

#featured li {
    margin: 0;
}

JQuery功能内容滑块样式问题

1 个答案: