导航栏空白

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中的输出