Question

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

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

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

您可以使用您想要的任何样式修改边框。

Answer 2

此处＆＃39; working fiddle ，其中包含6个img+p列表项（每个图片上都有空alt 请），其中一半.even上课（:nth-child(2n)与IE9 +兼容，我仍然支持I8，但如果你不支持后者，你就不需要了类）。

如果每个图像都高于其文本，那将会有效，否则您必须使用一堆段落（不在列表中）才能使用＆＃34; rows＆＃34;重新创建CSS表格布局。包含2个段落，段落为＆＃34;单元格＆＃34; （我的意思是显示为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;
}

从ul元素创建一个表，没有CSS中的顶部和侧边

2 个答案: