Html 漂浮猫咪

问题是：

我想让小猫在输入后出现

恐怕输入必须正确浮动，不能更改

此外，HTML顺序无法更改，因为此标签是在我输入后自动生成和注入的

我还想让这三个元素保持在一条线上

HTML：

---

更改placekitten和输入的顺序。

在输入之前移动placekitten。而且为什么它需要向右浮动？如果你想要传统的支持，你不应该真的使用伪选择器

更新：根据固定宽度输入的想法变化， 在输入上仍然有一个右边距，然后将小猫放在空间中-需要一个行容器div

---

我也尝试了.error div的边距，但是IE不喜欢它，但是相对定位似乎可以做到这一点

clairesuzy的答案很好，但是当帧太小而无法同时显示输入+框时，它的行为确实很奇怪。可能不是什么大问题，但如果是，请尝试以下方法：

将以下属性添加到div.error类：

clear:right;
margin-top:-1em;

然后将以下内容添加到输入元素：

margin-right:20px;  

---

---

使用绝对定位。。。如果必须：P

你说的“保持在线”是什么意思？你的意思是不再有元素了吗？@rickchristie我的意思是它们必须是内联的，而不是块。元素应该彼此相邻，而不是在上面或下面这三个元素是否有一个容器？如果是这样的话，将其设置为相对位置，并将其设置为绝对位置。@EgeOzcan是的，位置绝对有效，但在IE8中中断它似乎有效：这神奇地解决了我的问题。但是我不能更改HTML。你有一个CSS唯一的解决方案吗？你可以浮动所有的左边，然后他们出现在你给的顺序。或者，您也可以使用display:table*；或者在相对定位容器中使用绝对定位，即kitten:right:0；，输入：右：；，两个位置：绝对，设置位置：相对；在一些容器分区上。你所说的伪选择器是什么意思！我是说伪类。。。抱歉，嗯，仍然看不到任何伪类。对。。。这令人困惑。在原始代码段上，Raymos使用label:first{}作为css声明。因此我引用了伪类。@SkippyChalmers我从来没有这样做过。它一直是label.firstQuick dirty hack。解决了我的问题！这是一个很好的解决方案，但它固定了输入的宽度。是的。所以它解决了这个例子，但我改变了对固定宽度输入的想法。不过解决方案很好。LOL不用担心，允许改变主意：我添加了一个定位方法的更新代码示例，本来可以更早完成，但必须做一些工作，定位方法确实需要行的包装器div，不确定您是否说有容器，如果你不需要小猫图片裁剪，移除隐藏在行中的溢出，或者让行足够高以容纳picwell斑点，我已经考虑过了，标签上的负右边距也和小猫一样宽，因为我认为有一种方法可以清除我们看不到的浮动

.first {
    float: left;
}

input {
    width: 200px;
    float: right;
    margin-right: 25px;    /* enough for kitten */
}

.error {
    float: right;
    right: -230px; /* input width + kitten width + any margin */
    position: relative;
}

clear:right;
margin-top:-1em;

margin-right:20px;