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中心无序列表

回答

相关问题