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>

结果是这样的:

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

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

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

Answer 1

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

1. 将标签放在 span 的底部。
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/