如何设置像桌子一样的无序列表？

Question

我只有一个<UL>，我们拥有<LI>

组

 <ul>
   <li>1<li>
   <li>2<li>

   <li>3</li>
   <li>4<li>

 </ul>

现在我想把它们显示为TABLE，请帮我用CSS，我们如何在下表格式中显示上述UL / LI的表，在一个TR（两个TD）中设置2 LI等等。 ..

Answer 1

嗯，这是一个可能的解决方案：

ul {
    width: 450px;           /* change it to whatever you like */
    position: relative;

    /* these should be probably already set up by `reset.css` */ 
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul:before, ul:after {
    text-align: center;
    display: block;
    border: 1px solid black;
    border-bottom: 0;
    width: 48%;
}

ul:before {
    content: 'col1';
    border-right: 0;    
}

ul:after {
    content: 'col2';
    position: absolute;
    top: 0;
    left: 48%;
    margin-left: 1px;    
}

li {
    text-align: right;
    width: 48%;
    float: left;
    border: 1px solid black;
    margin-bottom: -1px;
}

li:nth-child(even) {
    margin-left: -1px;
}

可行（JSFiddle;在Chrome，Firefox和Opera中测试; nth-child(even)选择器在IE8中明显失败，因此您必须使用类或其他方式来模拟它;但除此之外它仍然是可靠的，但我承认我对此感到内疚。 ）

P.S。如果要为“单元格”内容添加填充，请不要忘记更改其宽度，例如here：

li {
    width: 47%;
    padding-right: 1%;
}

Answer 2

这是一个非常晚的答案，但我认为这是一个常见的话题。 Here's a codepen I made

显然，这只是一个起点。它还有一些如何添加bg或border等样式的示例。如果'单元格'包含一些任意内容，则必须调整尺寸。我将这种代码用于缩略图库，例如，你不必担心边框或bgs，它是非常基本的代码（例如2x3表，请参阅codepen）：

ul{
  list-style:none;
}

ul li{
  float:left;
  padding:10px;
  border-bottom:1px solid #000;
  border-right:1px solid #000;
}

ul li:nth-child(3n){
  background-color:#888;
}

ul li:nth-child(3n+1){
  clear:both;
  border-left:1px solid #000;
  background-color:#ccc;
}

ul li:nth-child(-n+3){
  border-top:1px solid #000;
}

希望它有所帮助。

Answer 3

您无法通过display: table属性将单个列表（包含两个以上项目）转换为2列，因为您需要一些元素作为表格行。如果没有作为表行的元素，则设置为display: table-cell的所有相邻元素将包含在无法以任何方式修改或设置样式的匿名表行元素中。

您唯一的选择是更改标记（使用表或列表列表）或使用不同的CSS方法：li上的浮点数/内联块或使用{{1 } columns上的属性。

Answer 4

将添加太多的CSS。如果你使用bootstrap只是分成网格。此外，它也会响应。