将表单中的标签与输入对齐
将表单中的标签与输入对齐
提问于 2012-03-13 22:57:02
我有非常基本的和已知的形式场景，我需要正确地对齐输入旁边的标签。然而，我不知道该怎么做。
我的目标是标签在右侧的输入旁边对齐。以下是所需结果的图片示例。
我做了一个小提琴是为了方便你，并澄清我现在的情况-- http://jsfiddle.net/WX58z/
代码片段：
<div class="block">
<label>Simple label</label>
<input type="text" />
</div>
<div class="block">
<label>Label with more text</label>
<input type="text" />
</div>
<div class="block">
<label>Short</label>
<input type="text" />
</div>
回答 5
Stack Overflow用户
发布于 2012-03-13 23:01:04
我使用类似这样的东西：
<div class="form-element">
<label for="foo">Long Label</label>
<input type="text" name="foo" id="foo" />
</div>风格：
.form-element label {
display: inline-block;
width: 150px;
}Stack Overflow用户
发布于 2016-09-06 00:17:05
您也可以尝试使用flex-box
<head><style>
body {
color:white;
font-family:arial;
font-size:1.2em;
}
form {
margin:0 auto;
padding:20px;
background:#444;
}
.input-group {
margin-top:10px;
width:60%;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
}
label, input {
flex-basis:100px;
}
</style></head>
<body>
<form>
<div class="wrapper">
<div class="input-group">
<label for="user_name">name:</label>
<input type="text" id="user_name">
</div>
<div class="input-group">
<label for="user_pass">Password:</label>
<input type="password" id="user_pass">
</div>
</div>
</form>
</body>
</html>Stack Overflow用户
发布于 2019-06-04 08:28:04
我知道这是一个老线程，但更简单的解决方案是将输入嵌入到标签中，如下所示：
<label>Label one: <input id="input1" type="text"></label>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9686538
复制相关文章
相似问题