Question

假设我有以下标记：

<li style="width: 200px;">
    <a href="....">
        <img style="width: 50px;" src="..." />
    </a>
    Lorem ipsum...
</li>

我希望图像浮动到左边。

float: left应该应用于图片标记还是包含它的锚标记？无论如何，两者都是内联元素。是否有推荐的做法或惯例？

编辑：也许我忘了指定图像后面有文字，所需的结果是图像应该与文本和右边的左边对齐。

Answer 1

img标记与a标记内联，并且由于其中没有其他内容，这几乎没有区别 - 与浮动类似，除非您的外部元素宽度大于内在元素; a元素的显示模式也是相对于它的父元素，所以这可能就是你想要的。

Answer 2

具有非显式宽度的浮动元素是不可预测的，因此我会使用图像，或者更好，但会给锚定义一个明确的宽度并使其阻止，以最小化任何间接更改。

请注意，如果在锚未浮动时浮动图像，锚将折叠为零宽度（和高度）。这是因为图像在浮动时从页面的正常流中取出。如果你浮动锚点，这将发生在锚点的父节点上。

Answer 3

取决于，如果它只是一个图像列表，并且你想浮动每个图像，你也可以浮动整个列表项。

Answer 4

您希望将类应用于锚链接而不是图像的原因与Asad所说的一样，将类应用于图像会将锚点移出页面流并移除其宽度和高度。

这一点很重要的原因是，当用户在页面中进行选项卡时，整个元素应在以下情况下突出显示：如下所示：http://cl.ly/fFwI

如果您将该类应用于图像，则会出现此行为：http://cl.ly/fFxh

如果标签焦点对您很重要，请将该类应用于锚点。