我对表单中的一组字段进行了一些标记:
<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
。
插入错误消息时如何使表单看起来像所需的布局?
最佳答案
要让标签始终显示在文本输入下方,无论是否存在错误消息,我建议采用以下方法:
- 将标签放在 span 的底部。
- 在输入的底部添加边距,使跨度足够大以包含标签。
这是一个简化的例子来说明该技术:
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;
}
关于html - 当某些元素存在时向下插入元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11043489/