html - 导航栏空白

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