Question

我有css布局问题。我正在尝试对齐必需的！输入元素右侧的消息

保持流程：

物种：

输入元素错误消息

品种：

输入元素错误消息

我尝试了各种嵌套的div而没有成功。

链接：
http://jsfiddle.net/d0773d/BpqyT/

Answer 1

你那里有太多不必要的标签（列表标签），请看看这个，我想这会有所帮助：

<div style="float:left;">
<select>
    <option>testing</option>
</select>
    <span>Required</span>
</div>
<div style="float:left;">
<select>
    <option>testing</option>
</select>
    <span>Required</span>
</div>

工作示例：

http://jsfiddle.net/BpqyT/7/

Answer 2

您可以使用'text-align：right;'使消息捕捉到其可用区域的右侧。但是当你这样做时，很明显父容器不会垂直排列。您需要重新设置标记和CSS。尝试其中之一：

两个div列，“right”和“left”，包含内容的右半部分或左半部分
摆脱容器div，只需使用float和width来排列所有内容。

Answer 3

引用： “我正在尝试将Required！消息对齐到输入元素的右侧”

您之间有一个换行符<br />，其中包含“必填！”在输入元素下面的另一行。

Answer 4

这与css无关，输入和错误消息之间有<br />标记，您必须先删除它们。

Answer 5

Div是块级元素，因此默认情况下它们会强制换行。要更正此问题，请更改：

<div id="species_error">

和

<div id="breed_error">

为：

<div id="species_error" style="display:inline-block">

和

<div id="breed_error" style="display:inline-block">

需要css布局的帮助

5 个答案: