css - 从 ul 元素制作一个表格，在 CSS 中没有顶部和侧面边框

Question

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

我有一个 ul 标签，里面有 li 标签，里面有文本和图像。我希望它们看起来像上面的表格。在每个 block 内，图像和文本彼此相邻。表格从上到左和右将没有边框((|| 和 ^ 用于表格的行))

<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>

Answer 1

将另一组 ul 嵌套到每个 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;
}

您可以根据需要修改边框。