保證金0自動不居中ul？

-1

HTML代碼：

<header> 
    <h1>Responsive HTML5</h1> 
    <p>This is a demo</p> 
    <nav> 
     <ul> 
     <li><a href="javascript:void(0)">Home</a></l1> 
     <li><a href="Javascript:void(0)">About</a></l1> 
     <li><a href="Javascript:void(0)">Services</a></l1> 
     <li><a href="Javascript:void(0)">Contact</a></l1> 
     </ul> 
    </nav> 
</header>

CSS代碼

下面是媒體查詢的CSS代碼，一切都很好，基本佈局，但沒有與此代碼的工作。

@media screen and (max-width: 932px){ 
     header{position: static; overflow: hidden; background-color: #666;} 
     header h1, header p{text-align: center;} 
     nav{float:left; position: static; padding: 1px;} 
     nav ul{width: 60%; margin: 0 auto;} 
}

來源

2014-01-18 Orahmax

您試圖以寬度爲100％的元素居中。減小寬度。 –

你遇到了問題，因爲無論你做什麼，文本都向左對齊。你需要像文字對齊。你可以像JoshC說的那樣減小寬度，但這不會那麼靈活。看看這個jsfiddle。 http://jsfiddle.net/F2Eza/編輯：http://jsfiddle.net/F2Eza/爲JoshC的解決方案。這不太靈活，但可以讓你的項目符合要求。 –

我粘貼了錯誤寬度的代碼，否則它是60％，我已經更新了它。 – Orahmax

nav 
{ 
position: static; 
padding: 1px; 
/* remove float: left; */ 
} 
nav ul 
{ 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
    text-align: center; 
}

將強制爲中心的文本，但並不一定是要點爲好。設置list-style-type: none;將完全刪除項目符號點，從而生成居中的無序列表。

而且一個供參考，您的</li>標籤應該是</li>，不</l1>

編輯：這裏有一個JSFiddle你看還有

來源

2014-01-18 05:28:28

糟糕，我發佈了幾個錯誤的舊代碼。 – Orahmax

好的。如果你從'nav'標籤中刪除'float：left;'，它應該更新 –

你可以做集中的UL是製造最簡單的事情爲.nav

.nav 
{ 
margin: 0 auto; 
list-style-type: none; 
text-align: center; 
}

你也有你的HTML代碼中的錯誤。CSS，你已經關閉li tag with /l1（應該是/li）這本身就是一個錯誤。希望這會幫助你。

來源

2014-01-18 05:54:08 Jiteen

它不是.nav，它是導航 – Naele

@media screen and (max-width: 932px){ 
    header{position: static; overflow: hidden; background-color: #666;} 
    header h1, header p{text-align: center;} 
    nav{ margin: 0 auto; list-style-type: none; text-align: center;} 
    nav ul{width: 60%; margin: 0 auto; list-style-type:none; } 
}

來源

2014-01-18 11:01:07 Rajnish

保證金0自動不居中ul？

回答

相關問題