如何显示HTML列表

Question

亥， 我需要在HTML中显示这样的内容 它应该是2列格式

.Apple .Mango
.Orange .Banana
.Grapes

任何人都可以发布一些示例代码或网址 在此先感谢

Answer 1

有两种方法可以做到这一点正确。在任何一种情况下，HTML都将保持不变：

<ul class="two-col">
  <li>Apple</li>
  <li>Mango</li>
  <li>Orange</li>
  <li>Banana</li>
</ul>

现在为CSS。首先，您可以使用float s：

.two-col {
  overflow: hidden;
}

.two-col li {
  width: 130px; /* Change this to any amount you want */
  margin-right: 10px;
  float: left;
}

或者你可以使用新的CSS3列属性（注意IE8及以下版本不支持）：

.two-col {
  column-count: 2;
  -moz-column-count: 2;
  -webkit-column-count: 2;
}

这将自动为每列提供原始宽度的一半。在这里弄清楚：http://www.jsfiddle.net/4jLK7/

Answer 2

添加到您的样式表：

li { 
    width: 50%;
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
}

你可能想要调整它，但这是一个合理的起点。

Answer 3

您可以尝试类似

的内容

<div style="float:left">
<ul>
  <li>List</li>
  <li>one</li>
</ul>
</div>
<div style="float:left">
<ul>
  <li>List</li>
  <li>two</li>
</ul>
</div>

请注意，我们强烈建议不要使用表格格式化您的网页。 （这就是我删除该部分的原因）使用<div>和<span>

真的更好