无序列表作为列

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中使用。

提前感谢， Ben

- Ben

Answer 1

这是非常简短的答案：

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

这里是稍微详细的解释：

• float 部分告诉你的列表在“同一行”上移动。您可能还想为 ul 元素添加 width 属性，以获得等宽的列。

• list-style-type 属性仅关闭了您的项目符号。最有可能的情况是，您现在会有空白处，这些空白处曾经是项目符号。可以通过覆盖 maring 和 padding 来去除它们 - 例如将它们都设置为零。

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

- Jørn Schou-Rode

---

“list-type-style”是我以前从未见过的东西，它是“list-style-type”的同义词还是打字错误？ - David Thomas

@ricebowl：那是因为我累了的结果。现在已经修好了。谢谢你指出来 :) - Jørn Schou-Rode

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重置块，那么在浏览器之间，这将看起来相当“标准”。我推荐Blueprint。

- Bryan A

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;
}

- Carra