css - 如何使用 CSS 从 ul 标签制作表格

Question

我里面有 UL 元素，有 3 个 li 标签，我想把它们并排放置，用行分隔:

<ul>
 <li>value 1</li>
 <li>value 2</li>
 <li>value 3</li>

</ul>

我希望输出看起来像这样:

value 1 | value 2 | value 3

顺便说一句，在 li 标签中，它们是图片和文本，我希望它们(图像和文本)彼此相邻并使用 CSS 位于框的中心。

Answer 1

ul li {

  // EITHER
  float: left; //Will make all li's be on a single line.
  //  OR
  display: inline-block;

  //Always followed by:
  border-right: 1px solid black;  // will give it the seperating line you want
}

ul {
  list-style: none // will remove the dot.
}

缺点:这不仅会在 li 之间而且会在最后一个 li 后面产生一个黑条。有多种使用伪选择器的解决方法，例如 :last-child、:nth-child(n-1) 等。

这http://jsfiddle.net/tEBF4/6/显示内联 block 、 float 和 float with clear: left 在列表本身上的区别。 (感谢 Sophisticake)以及一种删除最后中间线的方法。很明显:有多种方法可以做到这一点，差异很小。

float

使列表 float ，这样其他元素就可以紧挨着它。

行内 block

虽然 li 现在是内联的，但此方法保留了 ul 本身的“ block ”行为，因此它旁边没有任何内容。