如何使用CSS从ul标签生成表格

我有UL元素，里面有3个li标签，我想把它们放在一起，用线隔开：

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

</ul>

值1
价值2
价值3

我希望输出如下所示：

值1 |值2 |值3

顺便说一句，在li标签中，它们是一张图片和一个文本，我希望它们（图像和文本）彼此相邻，并使用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.
}

缺点：这不仅会在李连杰和李连杰之间，而且会在李连杰和李连杰后面形成一条黑线。使用伪选择器有多种变通方法，如：last child、：n child（n-1）等

这显示了内联块、浮点和列表本身上带clear:left的浮点之间的差异。（多亏了诡计多端）也是一种删除中间最后一行的方法。很明显，有多种方法可以做到这一点，但差别很小

浮动

使列表浮动，以便其他元素可以位于其旁边

内联块

---

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

内联块似乎更好，因为所有答案都在谈论它

为了确保所有内容都在一行上，您可以使用：
空白：nowrap

要绘制管道，您有
边框
s，但它可以是
背景
或
框阴影

框阴影
可用于填充通常出现在内联框之间的
空白

可以使用Selecteur
+
，因此第一个元素不会绘制任何管道，它比
:first child
，
:first of type
，
：nth child（1）
：last child
。。。或：最后一种类型

基本CSS可以是：

li + li {  
  box-shadow:-4px 0px rgba(255,255,255,0.4);   /* unblured left shadow and fill white-space*/
}

ul {  
  text-align:center;  /* center li */
  white-space:nowrap; /* force 1 line*/
}
 li {
  display:inline-block;
}
li:hover {
  background:white;/* demo purpose */
}

设置要显示的列表项：内联块；很好的回答，虽然在实践中我喜欢在可能的情况下不使用浮动，因为它会改变它周围的元素。显示：内联块也可以工作，并允许稍微更方便的定位（如居中）感谢您的输入-我大大扩展了答案，以解释两种方式多一点。