Question

我正在尝试将无序列表用作以下设置列的列：

<ul>
<li>word 1</li>
<li>word 1</li>
<li>word 1</li>
<li>word 1</li>
<li>word 1</li>
</ul>
 <ul>
 <li>word 2</li>
 <li>word 2</li>
 <li>word 2</li>
 <li>word 2</li>
 <li>word 2</li>
 </ul>

对于css来说，我需要做什么才能将这些阵容并排作为没有项目符号的垂直列表。我确定我错过了一些简单的东西，但我似乎无法弄明白。我特别需要这个在IE7中工作。

提前致谢，本

Answer 1

这是一个非常简短的答案：

ul {
  float: left;
  list-style-type: none;
}

这是稍长的解释：

float部分告诉您的列表“在同一行上”一起移动。您可能还希望向width元素添加ul属性，以便获得均匀分布的列。
list-style-type属性只会关闭您的项目符号。最有可能的是，现在你将拥有子弹空间。这可以通过覆盖maring和padding来删除 - 例如。将它们都设置为零。

您可能还想在列表后面的任何元素上添加clear: left属性。

Answer 2

<div class="wrapper">
<ul>
<li>word 1</li>
<li>word 1</li>
<li>word 1</li>
<li>word 1</li>
<li>word 1</li>
</ul>
 <ul>
 <li>word 2</li>
 <li>word 2</li>
 <li>word 2</li>
 <li>word 2</li>
 <li>word 2</li>
 </ul>
<div class="clear"></div>
</div>

<style type="text/css">
ul {width: 40%; float: left;list-style-type: none;}
ul li {list-style-type: none;}
.clear {clear:both;font-size:0px;line-height:0px;height:0px;}
</style>

沿着这些方向做的事情......请记住，如果你有一个不错的CSS重置块，这将在浏览器之间看起来更加“标准”。我推荐蓝图。

Answer 3

以下是一个例子：

<div id="menucontainer">
  <ul>
    <li>w1</li>
    <li>w2</li>
  </ul>
</div>

的CSS：

#menucontainer ul {
  list-style-type: none;
}

#menucontainer ul li {
  display: inline;
  padding: 0.1em;
}

无序列表作为列

3 个答案: