CSS 浮动在锚点或其他内联元素内的内容上答案

【问题标题】：CSS float on content inside an anchor or other inline elementsCSS 浮动在锚点或其他内联元素内的内容上
【发布时间】：2012-10-31 17:23:32
【问题描述】：

假设我有以下标记：

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

我希望图像向左浮动。

应该将float: left 应用于图像标签还是包含它的锚标签？无论如何，两者都是内联元素。对此有推荐的做法或约定吗？

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

【问题讨论】：

【解决方案1】：

您要将类应用于锚链接而不是图像的原因就像 Asad 所说的那样，将类应用于图像会将锚从页面流中取出并移除其宽度和高度。

这很重要的原因是，当用户在页面中切换时，整个元素应该在 :focused 时突出显示，如下所示：http://cl.ly/fFwI

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

如果选项卡焦点对您很重要，请将类应用于锚点。

【讨论】：

【解决方案2】：

img 标记内联到a 标记，并且由于其中没有其他内容，因此几乎没有区别 - 与浮动类似，除非您的外部元素比内部元素更宽； a 元素的显示模式也将与其父元素相关，所以这可能就是您想要的。

【讨论】：

【解决方案3】：

具有非明确宽度的浮动元素是不可预测的，所以我会使用图像，或者更好的是给锚点一个明确的宽度并使其阻塞，以尽量减少任何间接变化。

请注意，如果您在锚点未浮动时浮动图像，则锚点将折叠到零宽度（和高度）。这是因为图像在浮动时脱离了页面的正常流程。如果你浮动锚，这将发生在锚的父级。

【讨论】：

【解决方案4】：

取决于，如果它只是一个图像列表并且您想浮动每个图像，您不妨浮动整个列表项。

【讨论】：