li 元素中的两行/换行符

Question

我有一个 <ul> 和几个 <li>。在我的 css 和 li { display: inline; } 中，我将 li 元素按水平顺序排列。 li 元素包含图片和文本。但是现在图片和文字也是横排的，但是我想让他们在下面。我该怎么做？

<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

Answer 2

这不是错误，而是正常现象。 <img> 标签默认是内联的。您可以通过将图像或更好的文本包装到块元素中来解决这个非问题。例如，文本的 <p> 标签：

<ul>
    <li>
        <img src="http://placehold.it/140x100" />
        <p>Your text here</p>
    </li>
    <li>
        <img src="http://placehold.it/140x100" />
        <p>Your text here</p>
    </li>
    <li>
        <img src="http://placehold.it/140x100" />
        <p>Your text here</p>
    </li>
</ul>

jsFiddle

注意我在 li 元素上使用 display:inline-block，同时利用 inline（并排放置、对齐...）和 block（固定大小, top/bottom 边距）属性。虽然它有 a strange but easilly fixed "feature/issue"，但大多数时候这是并排放置元素的最佳方式。 display: inline 或浮动元素也被使用，但伴随着一些其他问题，有时修复起来有点棘手。

li 元素中的两行/换行符

two lines / line break in li element

html

html-lists