html - 当某些元素存在时向下推元素

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;
}

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

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

<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>

这会导致这样的结果：

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

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

插入错误消息后，如何使表单看起来像所需的布局？

Answer 1

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

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

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

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/

Answer 2

只需使用 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 3

不确定我是否正确阅读了这篇文章，但是...

margin-top 不适用于具有 position:absolute 的孤立元素，因为绝对定位的元素不是常规流布局的一部分。上边距没有什么可反对的。

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

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