在输入旁边的表格中对齐标签
Sta*_*tan 119 html css alignment
我有非常基本和已知的形式场景,我需要正确对齐输入旁边的标签.但是我不知道怎么做.
我的目标是将标签与右侧的输入对齐.这是期望结果的图片示例.
我为你的方便做了一个小提琴,并澄清了我现在拥有的东西 - 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>bfa*_*tto 175
一种可能的方案:
- 给标签
display: inline-block; - 给他们一个固定的宽度
- 将文本对齐到右侧
那是:
label {
display: inline-block;
width: 140px;
text-align: right;
}?<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>- 如果某些标签是复选框或单选按钮,我该如何工作呢？这些元素的标签最终具有与文本框标签相同的固定宽度,这是不希望的.有没有办法在标签上没有固定宽度的情况下这样做？ (2认同)
- 如何使这个响应？以及如何应对 i18n？我的意思是文本标签在不同的语言中具有不同的长度，因此我担心如果文本很长，则设置固定宽度填充不起作用。 (2认同)
- 这是标记固定宽度，它应该是动态的，基于最大标签宽度。 (2认同)
Dav*_*ord 17
虽然这里的解决方案是可行的,但最近的技术已经成为我认为更好的解决方案.CSS网格布局允许我们构建更优雅的解决方案.
下面的CSS提供了一个2列"设置"结构,其中第一列预期是右对齐标签,后面是第二列中的一些内容.通过将其包装在<div>中,可以在第二列中呈现更复杂的内容.
[作为旁注:我使用CSS添加跟踪每个标签的':',因为这是一个风格元素 - 我的偏好.
/* CSS */
div.settings {
display:grid;
grid-template-columns: max-content max-content;
grid-gap:5px;
}
div.settings label { text-align:right; }
div.settings label:after { content: ":"; }<!-- HTML -->
<div class="settings">
<label>Label #1</label>
<input type="text" />
<label>Long Label #2</label>
<span>Display content</span>
<label>Label #3</label>
<input type="text" />
</div>- 最优解！现在在 Chrome 73 中运行良好。 (2认同)
And*_*ich 12
之前回答过这样的问题,你可以看一下这里的结果:
创建表单以使字段和文本彼此相邻 - 这样做的语义方式是什么？
因此,要将相同的规则应用于您的小提琴,您可以使用display:inline-block它们并排显示您的标签和输入组,如下所示:
CSS
input {
margin-top: 5px;
margin-bottom: 5px;
display:inline-block;
*display: inline; /* for IE7*/
zoom:1; /* for IE7*/
vertical-align:middle;
margin-left:20px
}
label {
display:inline-block;
*display: inline; /* for IE7*/
zoom:1; /* for IE7*/
float: left;
padding-top: 5px;
text-align: right;
width: 140px;
}
- 这是一个非常好的解决方案，除了您必须对标签的宽度进行硬编码这一事实之外。如果新标签太长 - 布局就会中断。似乎应该有一个更强大的解决方案？ (2认同)
我使用类似的东西:
<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;
}
我知道这是一个旧线程，但更简单的解决方案是将输入嵌入到标签中，如下所示：
<label>Label one: <input id="input1" type="text"></label>小智 5
您也可以尝试使用 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>