Question

我对表单中的一组字段有一些标记：

<ul>
  <li>
    <label>Field label</label>
    <ul>
        <li>
            <span>
                <label>some label</label>
                <input type="text" value="a" size="35" maxlength="35">
            </span>
        </li>    
        <li>
            <span>
                <label>some label</label>
                <input type="text" value="b" size="35" maxlength="35">
            </span>
        </li>
        <li>
            <span>
                <label>some label</label>
                <input type="text" value="c" size="35" maxlength="35">
            </span>
        </li>
    </ul>
  </li>
</ul>

还有一些CSS来定位它们：

*{
    position: relative;
}

span{
    position: relative;
    display: inline-block;

}

input{
    float:left;
}

label{
    float:left;
    margin-top: 15px;
    left: 70px;
}

li > ul{
    margin-left: -100px;
    max-width: 400px;
    display: inline-block;
}


li > label{
    float: left;
    vertical-align: top;
    margin: 0;
    left: 0;
    width: 120px;
    display: inline-block;
}

这导致了这种布局，非常适合我的需要： enter image description here

问题：当某些字段填写不正确时，系统会生成错误消息，从而产生如下标记：

<ul>
  <li>
    <label>Field label</label>
    <ul>
        <li>
            <span>
                <label>some label</label>
                <div class="error">some error message.</div>
                <input type="text" value="a" size="35" maxlength="35">
            </span>
        </li>    
        <li>
            <span>
                <label>some label</label>
                <div class="error">some error message.</div>
                <input type="text" value="b" size="35" maxlength="35">
            </span>
        </li>
        <li>
            <span>
                <label>some label</label>
                <div class="error">some error message.</div>
                <input type="text" value="c" size="35" maxlength="35">
            </span>
        </li>
    </ul>
  </li>
</ul>

这导致如下：

enter image description here

相反，我希望错误消息显示如下：

enter image description here

我已经尝试使跨度内的标签绝对定位，然后与跨度的底部对齐。但是，由于某些原因，即使我给标签margin-top，它总是被文本输入重叠。

如何在插入错误消息时让表单看起来像所需的布局？

Answer 1

只需使用float left并重新排列html中的元素：

ul {
    padding: 0;
}

li {
    display: block;
}

.form-label {
    float: left;
    padding-right: 20px;
}

label {
    display: block;
}

ul ul {
    float: left;
}

.error {
    color: red;
}

http://jsfiddle.net/ysv8E/embedded/result/

Answer 2

不确定我是否正确阅读，但......

margin-top不适用于position：absolute的隔离元素，因为绝对定位的元素不是常规流布局的一部分。最高保证金没有任何可以采取行动。

具有position：absolute的元素也不会导致在常规流布局中使用额外的垂直空间，这就是为什么它们出现在输入上而不是在输入下面。

如果必须使用position：absolute，则必须安排另一种方法将额外的垂直空间添加到布局中。使用CSS，您可以隐藏和显示没有位置的不可见元素：绝对（除了隐藏和显示错误消息），或者您可以在显示错误消息时增加每个表单元素之间的边距或填充。但是可能有一种更简单的方法（少用绝对位置）。

Answer 3

要使标签始终显示在文本输入下方，无论是否存在错误消息，我建议采用以下方法：

将标签放在跨度的底部。
在输入底部添加边距，以使跨度增大到足以包含标签。

这是一个用于说明该技术的简化示例：

HTML：

  <span>
      <label>some label</label>
      <div class="error">some error message.</div>
      <input type="text" value="a" size="35" maxlength="35">
  </span>

CSS：

span{
  display: block;
  position: relative;
}

label {
  position: absolute;
  bottom: 0px;
}

input {
  margin-bottom: 20px;
}

http://jsfiddle.net/fuEqB/

当存在某些元素时向下推动元素

3 个答案: