Question

可以在屏幕'ul'列表中显示这样的内容吗？：

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

我需要将所有内容放在一个ul和li中的块中（例如5个元素）。

Answer 1

ul {width: 120px;}
li {margin: 0; padding:0; float: left; width: 40px;}

Answer 2

尝试调查display: table-cell。我几乎可以肯定你想要的东西。

CSS-Tricks Display Property

Answer 3

您可以使用column-count CSS3

执行此操作

尝试

ul {

    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3; /*3 in those rules is just placeholder -- can be anything*/
}

SEE DEMO

Answer 4

您使用CSS3 multi-column layouts。将以下样式应用于UL：

UL {
    column-count:3;
    -moz-column-count:3;
    -webkit-column-count:3;
}

（您可能需要根据需要重新排列LI）

演示：http://jsfiddle.net/2N7rB/

在块中显示一个ul列表

4 个答案: