如何使用CSS从ul标签制作表格 [英] How to make a table from ul tag using CSS

问题描述

我里面有UL元素，有3个li标签，我想将它们彼此并排放置:

I have UL element inside it there is 3 li tags I want to put them next to each other separated by lines:

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

</ul>

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

I want the output to look like this:

值1 |值2 |值3

value 1 | value 2 | value 3

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

BTW in the li tags their is a picture and a text, I want them (image & text) next to each other and in the center of the box using CSS.

推荐答案

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)等.

Downside: This will create a black bar not only in between the li's but also behind the last one. There are multiple workarounds using pseudo-selectors like :last-child, :nth-child(n-1) and more.

此 http://jsfiddle.net/tEBF4/6/显示了内联-阻止，浮动和清除浮动:保留在列表本身上. (感谢Sophisticake)以及删除最后一个中间行的一种方法.显而易见:只有很微小的差异，有多种方法可以做到这一点.

This http://jsfiddle.net/tEBF4/6/ shows the difference between inline-block, float, and float with clear: left on the list itself. (Thanks to Sophisticake) and also one method of removing the last in-between-line. It becomes clear: there are multiple ways of doing this with only very minor differences.

浮动

制作列表，好吧，浮动，以便其他元素可以在列表旁边.

Makes the list, well, float, so other elements can be next to it.

内联屏蔽

虽然li现在是内联的，但此方法保留了ul本身的阻止"行为，因此没有其他内容了.

While the li's are now inline, this method retains the "block" behavior of the ul itself, so nothing goes next to it.

这篇关于如何使用CSS从ul标签制作表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！