列表不會水平居中

是否有任何建議，爲什麼此列表不會水平顯示AND居中。列表不會水平居中

當鋰項目實際顯示在線，我敢肯定，定心如下...

THANKS

HTML：

<div id="nav"> 
<div class="navtable"> 
<ul id="nav1"> 
    <li><img src="images/kranznav2.png" alt="kranz"/><a href="index.php">COMPETE</a></li> 
    <li><img src="images/thumbnav2.png" alt="thumb"/><a href="score.php">SCORE</a></li> 
    <div id="logolist"><li><a href="index.php"><img src="images/logorz.png" width="175em" /></a></li></div> 
    <li><img src="images/bagnav2.png" alt="bag"/><a href="index.php">SHOP</a></li> 
    <li><img src="images/morenav2.png" alt="more"/><a href="index.php">MORE</a></li> 
</ul> 
</div> 
</div>

CSS：

#nav { 
    position:relative; 
    background:#ffffff; 
    width:100%; 
    height:0.2em: 
    overflow:visible; 
    margin-top:-2em; 
    font-family:Cusmyrb; 
    font-size:75%; 

} 

#logolist { 
    position:absolute; 
    padding-top:2em; 
    width:250px; 
    left:50%; 
    margin-left:-100px; 
    margin-top:-7%; 

} 

#nav a { 
    display:block; 
    margin-right:0% auto; 
    padding-left:0% auto; 
    color:#343234; 
    text-decoration:none; 


} 

.navtable { 
    display:table; 
    margin:0 auto; 
} 

ul#nav1 { 

    min-width:700px; 
    list-style:none; 
    padding-top:20px; 
} 

ul#nav1 li { 
    display:inline; 
}

來源

2013-01-08 user1749428

你'div'包裝一個'li'不是有效的HTML。你應該通過像http://validator.w3.org/這樣的驗證程序來運行你的網站。 –

對於初學者來說，將'display：inline'放在'ul'而不是'li'上。另外，你不需要'＃nav'前面的'ul'。標識應該是唯一的，所以你不需要限定它。然後將'li'浮動到左邊。擺脫'ul'裏面的'div'，這是非法的。 –

仍然無法正常工作... – user1749428

添加這樣的事情：

.navtable { 
margin: 0 auto; 
width: 90px; 
}

您需要設置一個固定的寬度，以你的導航，這個例子會工作。

來源

2013-01-08 21:11:03

如果您檢查小提琴，將寬度添加到.navtable不會水平顯示它... – user1749428

如果你想讓你的ul#nav1居中，你只需要在其上添加margin: 0 auto;即可。

在小提琴你不會看到這個工作，因爲你的包裝div#nav設置爲獲得寬度100％，如果你將它設置爲2000px它應該顯示它正確。

希望這會有所幫助:)

來源

2013-01-08 22:53:51 xecstasyx

列表不會水平居中

回答

相關問題