Question

我日复一日地创建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个多小时试图解决这个问题？！？

Answer 1

除非在CSS中明确设置，否则

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

ul, li {margin:0; padding:0;}

css菜单上的几个链接步骤到新行

1 个答案: