标签元素后的html img答案

【问题标题】：Html img after label element标签元素后的html img
【发布时间】：2011-02-06 20:48:36
【问题描述】：

嗨，

我有以下 HTML：

<div class="controlTitleContainer ">
    <label for="test">Titel</label>
    <div class="q">&nbsp;</div>
</div>

CSS 看起来像这样

.controlTitleContainer .label
{
    font-size:              0.94em;
    color:                  #778899;
    display:inline;
}

.controlTitleContainer .q
{
    background-image:       url("Images/Common/Icons/questionMark_15x14.png");
    height:                 14px;
    width:                  15px;
    float:left;
}

问题是div会放在标签的左边而不是右边？为什么？

我试图将 div 切换到一个跨度但没有成功。此外，如果我将 div 更改为 img intead，那么它会起作用，但是有一些我无法使用 div 元素删除的多余边距。

请指教

Edit1：问题中的困惑现在应该得到解决，对此感到抱歉。

MySolution ：我创建了两个 div 元素（一个用于文本，一个用于图标），然后在两个元素上都将浮动设置为左侧。

【问题讨论】：

拿出float:left就行了
这个问题似乎有点混乱，但基本上只是浮动，应该这样做。 PS：LP Meteora ftw！
谢谢，但这并没有帮助。 div 将位于标签下？

标签： html css label

【解决方案1】：

你很困惑。您在问题标题中讨论 IMG，然后在代码中显示 SPAN，然后在文本中讨论 DIV。

但我猜这三个都在您的代码中引用 SPAN，因为您确实为您的 SPAN 元素设置了背景图像。

解决方案

无论如何。您的 span 根据您的 CSS 向左浮动。如果您在样式表中删除以下行，您的 span 将出现在您的 label 的右侧：

float: left; /* <- remove this */

编辑：我想你的问题由于这种混淆而被否决了。如果您希望社区帮助提供详细的答案，那么您至少可以花时间以与您期望的相同的谨慎程度来制定您的问题。

【讨论】：

谢谢！如果我使用 Span，那么元素的大小将基于包含的文本，在本例中是。这意味着将仅显示跨度中图像的一小部分。如果我从 span 更改为 div，则将显示图像（元素是正确的大小），但它将放置在标签下方的行上（无浮动：左；已使用）。

【解决方案2】：

您不想将图像放在标签的右侧吗？您已指定float: left;。您可能还想在 css 代码的第一行将 .label 更改为 label。

【讨论】：

这应该允许您将样式应用于标签元素而不是标签类；其中 - 根据共享标记 - 您的标记中没有。
在我的情况下，我可以删除 .label ，这将是标签的正确字体大小和颜色。如果我将 float:left 更改为 float:right 那么 div 将被放置在尽可能远的右边，而不是正确的。我想要的只是将 div/span/imag 或任何有效的东西放在标签的右侧。

【解决方案3】：

你可以使用“CSS :after Selector”

链接：http://www.w3schools.com/cssref/sel_after.asp

【讨论】：

【解决方案4】：

浮动可能很棘手...我只是确保标签是内联或内联块，并且您的图像或图像容器也是内联或内联块。然后将它们对齐为一行上的文本。是的！

【讨论】：