Question

我有<ul>个<li>。在li { display: inline; }的css中，我将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

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（固定大小，顶部） / bottom margin）属性。虽然它有a strange but easilly fixed＆＃34;功能/问题＆＃34;，但大多数情况下这是将元素并排放置的最佳方式。还使用display: inline或浮动元素，但是有些其他问题有时候有点棘手。

li元素中的两行/换行符

2 个答案: