用 ul 元素制作一个表格，在 CSS 中没有顶部和侧边的边框答案

【问题标题】：Make a table from ul elements without the top and the sides borders in CSS用 ul 元素制作一个表格，在 CSS 中没有顶部和侧边的边框
【发布时间】：2017-09-23 01:41:57
【问题描述】：

值 1 ||价值 2
^^^^^^^^^^^^^^^^^^^^^^
值 1 ||价值 2
^^^^^^^^^^^^^^^^^^^^^^
值 1 ||价值 2
^^^^^^^^^^^^^^^^^^^^^^

我在其中有一个ul 标记，其中有一个带有文本和图像的li 标记。我希望它们看起来像上面的表格。在每个块内，图像和文本将彼此相邻。表格从顶部和左侧和右侧将没有边框（（|| 和 ^ 用于表格的行）

<ul>
   <li>value 1</li>
   <li>value 2</li>
   <li>value 3</li>
   <li>value 4</li>
   <li>value 5</li>
   <li>value 6</li>
</ul>

在每个li 标签内都会有：

<li>
   <img src="test.jpg"/>
   <p>some text</p>
</li>

【问题讨论】：

你为什么不用<table> 来代替？

标签： css image text html-lists tabular

【解决方案1】：

将另一组uls 嵌套到每个li。

Working JSFiddle Example

<ul class="top-level">
    <li class="border-bottom">
        <ul class="horizontal">
            <li class="border-right">
                <p>some text</p>
            </li>
            <li>
                <p>some text</p>
            </li>
        </ul>
    </li>
    <li class="border-bottom">
        <ul class="horizontal">
            <li class="border-right">
                <p>some text</p>
            </li>
            <li>
                <p>some text</p>
            </li>
        </ul>
    </li>
    <li class="border-bottom">
        <ul class="horizontal">
            <li class="border-right">
                <p>some text</p>
            </li>
            <li>
                <p>some text</p>
            </li>
        </ul>
    </li>
 </ul>

然后使用这个 CSS：

.horizontal li {
    list-style-type: none;
    display: inline-block;
    padding-right: 5px;
}

.top-level {
    list-style-type: none;
}

.border-right {
    border-right: 1px solid black;
}

.border-bottom {
    border-bottom: 1px solid black;
}

你可以用任何你想要的样式来修改边框。

【讨论】：

【解决方案2】：

这是一个 working fiddle，其中包含 6 个由 img+p 组成的列表项（请在每张图片上使用 空 alt），以及 .even 类其中一半（:nth-child(2n) 与 IE9+ 兼容，我仍然支持 I8，但如果您不支持后者，则不需要该类）。

如果每个图像都高于其文本，这将起作用，否则您必须使用一堆段落（不在列表中）才能重新创建 CSS 表格布局，其中“行”包含 2 个段落和一个段落一个“单元格”（我的意思是显示为display: table-cell）

* { -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

ul {
    width: auto;
    margin: 0;
    padding: 0;
}
li {
    list-style-type: none;
    float: left;
    width: 50%;
    margin: 0;
    padding: 10px;
}
li > img {
    float: left;
    margin-right: 1em;
}
li > p {
    overflow: hidden;
}
.even {
    border-left: 1px solid #333;
}
li {
    border-bottom: 1px solid #333;
}

【讨论】：