Question

我需要在html 4X2中创建UL列表

类似这样的事情

item1 | item2 | item3 |第4项

item5 | item6 |第7项|第8项

这可能与ul列表有关吗？

我知道如何创建klasic licst ..喜欢

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

Answer 1

您可以使用float CSS属性来实现此目的。

JSFiddle demo。

li {
    float: left;
    width: 25%;
}

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
  <li>item 8</li>
</ul>

Answer 2

只需在内联显示li元素并制作两个单独的列表：

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>
<ul>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
</ul>

CSS：

li { display:inline; }

如果您想要更多控制权，可以设置inline-block并设置宽度，边距等

JS Demo

Answer 3

喜欢这个

<强> demo

<强> CSS

ul{
    margin:0;
    padding:0;
}
li{
    display:inline-block;
    border:1px solid black;
    margin:5px;
}

Answer 4

您可以将UL的max-width添加到不超过4次的宽度

HTML UL列表4X2

4 个答案: