8

我只有一个<UL>，下面我们有一组<LI>

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

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

 </ul>

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

在此处输入图像描述

4

3 回答 3

9

好吧，这是一种可能的解决方案：

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 中显然失败，所以你必须用类或其他方式模拟它；但除此之外它仍然是可靠的），但我承认我对此感到内疚。)

PS如果你想为“单元格”内容添加填充，不要忘记改变它们的宽度，就像这里：

li {
    width: 47%;
    padding-right: 1%;
}
于 2012-12-11T17:31:38.153 回答
4

这是一个非常晚的答案，但我认为这是一个常见的话题。这是我制作的代码笔。

显然，这只是一个起点。它还提供了一些示例，说明如何添加背景或边框等样式。例如，如果“单元格”包含一些任意内容，则必须调整尺寸。我将这种代码用于缩略图画廊，例如，您不必担心边框或 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;
}

希望能帮助到你。

于 2014-08-11T10:27:32.080 回答
2

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

您唯一的选择是更改标记（使用表格或列表列表）或对 CSS 使用不同的方法：在lis 上使用floats/inline-block 或columns在ul.

于 2012-12-11T17:29:51.927 回答