在2列无序列表中将对齐，图像和文本彼此相邻

I am trying to render a 2 column unordered list. I want each li tag to have a image followed by text with a certain gap in between. If the text spills over two lines, the 2nd line must align with the first line, not with the image. I got a solution earlier but, I am told to have a slimmer code.

我试图渲染一个2列无序列表。我希望每个li标签都有一个图像,后跟文本,其间有一定的间隙。如果文本溢出两行,则第二行必须与第一行对齐,而不是与图像对齐。我之前得到了一个解决方案但是,我被告知要有一个更细的代码。

I need the image to be the background image for each li tag. Code is my teh JSfiddle link.

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

I am not sure where I am going wrong.

我不知道我哪里出错了。

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

1 个解决方案

#1

how if put <table> in each li ?

怎么把

放在每个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>

LET'S SEE FIDDLE

让我们看看

#1