我的网页上的表单存在明显的样式问题。
对表单的要求之一是，每当表单包含错误时，错误消息必须出现在标签和输入字段之间。只要没有错误，就应该只有一个标签和一个输入字段。见下图:
问题是，每当弹出错误消息时，输入字段被下推，并且同一行中的输入字段不再相互对齐。我需要彼此水平对齐的输入字段。换句话说，它应该看起来像下图(忽略愚蠢的水印):
这些是我需要帮助解决的主要问题:
- 在标签和输入字段之间正确显示错误消息。
- 始终保持输入字段在一条直线上
- 将标签、错误消息和输入字段彼此放在同一个 div 中(它们不能在不同的行中)
- 同时做以上三件事
这是 HTML:
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="row">
<div class="col-xs-4">
<div>Label for first input field!</div>
<div class="error">Label for first error message!</div>
<input type="text"/>
</div>
<div class="col-xs-4">
<div>Label for second input field!</div>
<div class="error">Label for second error message!</div>
<input type="text"/>
</div>
<div class="col-xs-4">
<div>Label for third input field!</div>
<!--<div class="error">Label for third error message!</div> -->
<input type="text"/>
</div>
</div>
</body>
</html>
这是 CSS:
.error{
color:red;
}
这是一个 plunker 的链接:http://plnkr.co/edit/i0RR3XXeevh03TtoBP1M?p=preview
编辑
这个问题只关心这些输入字段的样式。这不是我要编辑的实际代码，而是一个反射(reflect)我要解决的问题的最小示例。无需考虑错误消息出现的机制，而只需考虑样式。
最佳答案
这里有一些没有验证的东西，为了演示目的，我放了一个错误按钮。通过合并 2 <div> 更改了标记标签变成真正的<label> .然后加了一个<br>和一个 <span>由一类切换 .none扩大窗口，以便您可以看到它正常工作。忘了说 <labels>是position: relative .
关于html - 如何保持水平放置的输入字段始终对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32210278/