导航栏白色空间

Question

抱歉，这可能是一个非常简单的问题，但我已经搜索了两天，似乎无法找到答案。这是我的第一篇博客，我没有任何CSS或HTML的经验 - 从星期天开始就玩它。这很有趣......令人沮丧。

无论如何......在我的新博客上工作（http://kentlawcso.blogspot.com/）我在标题下方导航栏的末尾有一大块空白区域。我在网上搜索并尝试了不同的解决方案，但我似乎无法找到摆脱空白区域的正确平衡而不会导致“志愿者机会”进入下一行（如果它在Chrome中有效，它不在IE中）。该栏的代码如下。有关如何将导航栏一直拉伸到右侧标题边框的任何想法。在某些浏览器中，增加填充也会将其推送到下一行。

提前感谢您的帮助！

#list-nav
{
padding:0;
overflow: hidden;
margin:-20;
}

#list-nav li 
{
display:inline;
}

#list-nav li a 
{   
font-family:Arial;
font-size:12px;
text-decoration: none;
float:left; 
padding:12px;
background-color: #333333;
color:#ffffff;
border-bottom:1px;
border-bottom-color:#000000;
border-bottom-style:solid;
}

#list-nav li a:hover 
{
background-color:#9B1C26;
padding-bottom:12px;
border-bottom:2px;
border-bottom-color:#000000;
border-bottom-style:solid;
margin:-1px;
}]]></b:skin>

Answer 1

这是我根据你的问题改变的css。我在firefox中检查了这个。

.header-outer {
    background: none repeat-x scroll 0 -400px #DDDDDD;
    margin-left: 3px;
    width: 776px;
}

.tabs-inner {
    /*padding: 0 15px;*/ /* i intentionally comment this to remove the padding */
}

.section {
    /*margin: 0 15px;*/ /* i intentionally comment this to remove the margin */
}

在div下方添加了内联样式（此div位于ul id =“list-nav”之上）

<div style="width: 789px;" class="widget-content">


#list-nav {
    margin: 0;
    padding: 0;
    text-align: center;
}

#list-nav li a {
    background-color: #333333;
    border-bottom: 1px solid #000000;
    color: #FFFFFF;
    display: block;
    float: left;
    font-family: Arial;
    font-size: 12px;
    margin-right: 4px;
    padding: 12px;
    text-decoration: none;
}

请参阅下面的屏幕截图，了解firefox中的输出