以流體網格佈局中的DIV內部DIV爲中心的故障

這是一件非常簡單的事情，但我現在一直在努力。 我想要一個無序列表保持居中div。無序列表的顯示設置爲內嵌，並且我希望在ul中的項目之間保持一致的距離。以流體網格佈局中的DIV內部DIV爲中心的故障

在我的代碼下面你會注意到我有'.menu2'設置爲顯示：無。對於較大的窗口，我有2個無序列表，並排排列。對於我正在使用的較小窗口，現在我想隱藏其中一個ul，剩餘的ul我想要以內聯方式顯示。我遇到的唯一問題是保持頁面居中。

幾件事情需要注意：

- 我試圖保持UL上只有一行

- 這只是應該是爲平板電腦大小的窗口，是因爲空間的UL需要佔據整個頁面的寬度。

- 當我在瀏覽器中預覽此窗口並調整窗口大小時，我發現它看起來好像ul與窗口左側保持一定距離，而窗口大小改變了右側窗口的ul變化。爲了嘗試解決這個問題，我嘗試在右側給出％的位置，但這沒有任何區別。

.menu li { 
list-style-type: none; 
width: auto; 
font-family: source-sans-pro; 
font-style: normal; 
font-weight: 200; 
float: left; 
clear: both; 
color: rgba(248,248,248,1.00); 
padding-top: 1%; 
font-size: 100%; 
} 

.menu { 
width: 20%; 
margin-top: 12%; 
position: relative; 
left: 1%; 
float: left; 
} 

@media only screen and (min-width: 482px) { 

.menu2 { 
display: none; 
} 
.menu { 
width: 100%; 
margin-top: 60px; 
} 
.menu li { 
display: inline; 
clear:none; 
padding-left: 3%; 
padding-right: 3%; 
font-size: 80%; 
}

http://jsfiddle.net/nickatnite_9/8UDC9/embedded/result/

不完全是它的外觀在我的網頁，但希望它會給你一個想法。

來源

2014-04-25 nickatnite

「我希望我可以提供一個鏈接顯示什麼我的工作，但因爲這ISN還沒有生活我不知道我怎麼能提供一個。「 - 使用jsfiddle.net重現您的問題，儘可能使用最少量的代碼。然後我們可以使用小提琴來幫助你。 –

@MikeKoch謝謝你的提示，我已經更新了我的問題。 – nickatnite

我無法打開您的jsfiddle - >（本網站的所有者和經營者不是本網站上顯示的任何可視內容的主要生產商（根據28 CFR§75.1c）。） – Petroff

這是行不通的，因爲你必須在float: left.menu li

將其刪除，並添加：

display: inline-block;

來源

2014-04-25 17:12:53 Petroff

這裏是編輯jsfiddle http://jsfiddle.net/8UDC9/9/現在的工作是？ – Petroff

以流體網格佈局中的DIV內部DIV爲中心的故障

回答

相關問題