0

我日复一日地创建 CSS 菜单，我以前从未遇到过这个问题，这真的让我感到困惑！:S

我已经尝试了我能想到的一切，但没有运气。在 Chrome 中它工作正常，但在 Firefox 中，最后一个链接进入一个新行，在 IE 中，最后两个链接进入一个新行。

如果我删除填充所有链接保持在同一行。

看看我在这里的意思... http://dlclients.com/estates/但这里是导致问题的 CSS 和 HTML 的摘要。

nav{
    background: url(images/background_nav.png) repeat-x;
    height: 30px;
    position: absolute;
    left: 0;
    width: 100%;
    margin-top: 20px;
 }

 #nav-inner{width: 1000px; height: 30px;}

 #nav-inner ul{list-style: none; margin: 0; padding: 0; width: 1070px;}
 #nav-inner ul li{
     display: inline;
     overflow: auto;
 }
 #nav-inner ul li a{
     display: block;
     color: white;
     text-decoration: none;
     font-size: 12px;
     float: left;
     height: 30px;
     line-height: 30px;
     border-right: 1px solid #6D6E71;
     padding: 0 14px;
 }
 #nav-inner ul li a.last{border: none;}
 #nav-inner ul li a:hover{
     border-bottom: 4px solid white;
 }

的HTML：

<nav>
                <div id="nav-inner">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Buy</a></li>
                        <li><a href="#">Sell</a></li>
                        <li><a href="#">Rent</a></li>
                        <li><a href="#">Landlords</a></li>
                        <li><a href="#">Property Maintenance</a></li>
                        <li><a href="#">Commercial/Land</a></li>
                        <li><a href="#">Short Term Let/Olympics</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#" class="last">Contact Us</a></li>
                    </ul>
                </div> 
            </nav>

希望您能帮助解决这个问题，因为我已经花了 2 个多小时试图解决这个问题？！？

4

1 回答 1

1

ul 和 li 具有由浏览器定义的填充和边距的预设值，除非在 CSS 中明确设置。尝试在第一行 CSS 上方添加以下内容，并相应地设置其余类的样式：

ul, li {margin:0; padding:0;}
于 2012-04-15T23:50:43.983 回答