li元素中的两行/换行符

Question

我有<ul>几个<li>.在我的CSS中,li { display: inline; }我将li元素按水平顺序排列.li元素包含picutre和文本.但是现在图片和文字也是水平排列的,但我希望它们彼此相互关联.我怎样才能做到这一点？

<ul>
        <li>

                <img src="img/a.png" />
                A

        </li>
        <li>

                <img src="img/b.png" />
                B

        </li>
        <li>

                <img src="img/c.png"/>
                C

        </li>
    </ul>

Answer 1

您需要更改CSS,如下所示:

li { 
  display: inline-block; 
}

li img {
  display: block;
}

这是一个快速演示:http://codepen.io/anon/pen/VLLoEZ