如何使用CSS和HTML布局列表项目？

我有一个div块，它不会不是有一个固定的宽度。如何使用CSS和HTML布局列表项目？

里面，我有一个<ul> <li>..</li>块与11项。我想在div内上市这些<li>项目，都用相等宽度是这样的：

##item## ##item## ##item## 
##item## ##item## ##item## 
##item## ##item## ##item## 
##item##   ##item##

但是，我不能它在所有理清。

我尝试左右浮动，但中央3个元素不会居中。

我能做些什么来得到这个工作？

谢谢！

来源

2013-02-14 Phil

你能否包含相关的标记和CSS？你可能只需要为每个“LI”指定一个宽度。 – 2013-02-14 22:23:47

最简单的解决方案是使用CSS列：（不包括前缀）

http://jsfiddle.net/6tD2D/

ul { 
    columns: 3; 
} 

<ul> 
    <li>a</li> 
    <li>b</li> 
    <li>c</li> 
    <li>d</li> 
    <li>e</li> 
    <li>f</li> 
    <li>g</li> 
    <li>h</li> 
    <li>i</li> 
    <li>j</li> 
    <li>k</li> 
</ul>

这将均衡列，最好就可以了。但是，如果没有足够的元素完全平等，它将开始从右侧而不是中心去除它们。

来源

2013-02-14 22:23:59 cimmanon

jsfiddle示例在我的Chrome中无法使用1列 – Dukeatcoding 2013-08-19 15:56:14

Chrome需要前缀。 http://caniuse.com/#feat=multicolumn – cimmanon 2013-08-19 15:58:10

在firefox中无法使用50 – teknopaul 2016-11-29 20:36:03

根据this StackOverflow问题，Inline Blocks可能正是你所需要的。

哦，如果你还没有实施它，一定要看看CSS Grids，也。如果你不想自己创建一个CSS网格，this one是太棒了。

来源

2013-02-14 22:25:17

约旦link约旦是一个很好的资源，特别是当涉及到旧的浏览器支持。为了快速参考其他人登陆谷歌这个页面，创建一个居中，行内块网格的基本css是：

ul { 
    margin: 0 auto; 
    text-align: center; 
} 

li { 
    display: inline-block; 
    vertical-align: top; 
}

来源

2014-02-10 13:40:03 FreedomMan

如何使用CSS和HTML布局列表项目？

回答

相关问题