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

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

1 个答案: