1

假设我有以下标记：

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

我希望图像向左浮动。

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

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

4

4 回答 4

1

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

于 2012-11-12T09:30:13.570 回答
1

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

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

于 2012-11-12T09:31:32.500 回答
1

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

于 2012-11-12T09:33:15.987 回答
1

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

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

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

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

于 2016-02-25T21:48:20.830 回答