DIV中心無序列表

好吧，我正在重新設計我的網站AlternativeApps.TK，以便用戶獲得最佳體驗。DIV中心無序列表

我有一個名爲設備，它具有Windows圖標，Linux，Mac，Android和iOS設備的圖像。在設備下是他們的名字。文本被集中在它們的圖標下，但是我似乎無法弄清楚如何將所有圖像居中放置在同一個div中，而不是像垂直一樣垂直放置。您可以下載源碼here。

來源

2011-09-02 Michael Schwartz

編輯新的信息有關水平佈局：

#devices > ul {display: inline-block;}

有！這就是你需要添加的。沒有討厭的脆性花車。

來源

2011-09-02 20:43:06

什麼是>做什麼？我從來沒有聽說過，或聽說過內聯塊。 –

'inline-block'改變了元素的顯示方式，'>'被用作後代選擇器。所以只有'＃設備的孩子的ul'將被設計。 – Loktar

在這個例子中你並不需要它;這只是一種習慣，因爲它在瀏覽器中速度更快。它選擇直接後代，所以'#devices ul'挑選#devices下的所有uls，而'#devices> ul'挑選那些直接的子節點。嵌套的子菜單很常見，因爲我只是習慣性地放置子菜單。雖然這很常見。另一方面，內聯塊是很好的標準CSS2，但出於某種奇怪的原因並不常見。很多人對此不以爲然。它使內部阻塞，外部內聯。這裏非常方便。 –

好吧我誤解了這個問題，最初嘗試這個，而不是。

#devices{ 
    margin: 0 auto; 
} 

ul li{ 
    float: left; 
    margin-left: 10px /* arbitrary value to stop them from hitting eachother */ 
    text-align : center; 
}

那麼您的標記更改爲類似

<div id="devices"> 
    <ul> 
     <li> 
      <img src="your image"/> 
      <p>your text</p> 
     </li> 
     <li> ... so on</li> 
     <li> ... so on</li> 
    </ul> 
</div>

來源

2011-09-02 20:39:40 Loktar

好的，謝謝，這工作，我怎麼能得到所有的圖像，並在div的中間，而不是垂直下降？ –

啊我誤解了你的問題，我猜...你希望他們都水平。 – Loktar

@ mikethedj4好吧上面的*應該*是你要找的。 – Loktar

div#devices ul { display:block; float:left; }

來源

2011-09-02 20:41:57 Samich

DIV中心無序列表

回答

相關問題