Question

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

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

</ul>

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

值1 |价值2 |价值3

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

下行：这将在李氏之间形成一个黑条，但也会在最后一条之后。使用伪选择器有多种解决方法，例如：last-child，：nth-child（n-1）等。

这个http://jsfiddle.net/tEBF4/6/显示了inline-block，float和float之间的区别，clear：left在列表本身上。（感谢Sophisticake）以及一种删除最后一个中间线的方法。很明显：有很多方法可以做到这一点，只有很小的差异。

<强>浮

使列表好，浮动，因此其他元素可以在它旁边。

<强>内联块

虽然li现在是内联的，但这种方法保留了＆＃34;块＆＃34; ul本身的行为，所以没有任何东西在它旁边。

Answer 2

Inline-block似乎更好，因为所有答案都谈到它。

为了确保所有内容都在1行，您可以使用：white-space:nowrap;

要绘制管道，您有border个，但它可以是background或box-shadow。

Box-shadow可用于填充内联框之间通常的white-space。

可以使用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 */
}

<强> TEST

如何使用CSS从ul标签创建表

2 个答案: