html - 在 2 列无序列表中对齐并图像和文本彼此相邻

Question

我正在尝试呈现一个 2 列的无序列表。我希望每个 li 标签都有一个图像，后面是文本，中间有一定的间隙。如果文本超过两行，则第二行必须与第一行对齐，而不是与图像对齐。我早些时候得到了一个解决方案，但是，我被告知要使用更简洁的代码。

我需要图像作为每个 li 标签的背景图像。代码是我的 JSfiddle 链接。

我不确定我哪里出错了。

<section class="freedom_carousel"> 




<ul class="two-col">
<li class="pen"> <span class="icon-text"> <em>THis is </em> text text text text text text text </span> </li>
<li class="phone"> <span class="icon-text"> <em>THis is </em> text text text text text text text </span> </li>
<li class="arrow"> <span class="icon-text"> <em>THis is </em> text text text text text text text </span> </li>
<li class="download"> <span class="icon-text"> <em>THis is </em> text text text text text text text </span> </li>
</ul>

 </section> 

JSFiddle:http://jsfiddle.net/rwcbdk38/1/

Answer 1

如果放 <table> 会怎样在每个li ？

<table>
            <tr>
                <td class="icon-text"><em>THis is </em></td>
                <td><span >  text text text text text text text </span> </td>
            </tr>
        </table>

让我们 SEE FIDDLE