Html 将表单中的标签与输入对齐
我有一个非常基本和已知的表单场景，我需要在输入旁边正确对齐标签。但是我不知道怎么做 我的目标是将标签与右侧的输入对齐。下面是期望结果的图片示例 为了您的方便，我做了一把小提琴，并澄清我现在所做的- 片段：Html 将表单中的标签与输入对齐,html,css,alignment,Html,Css,Alignment,我有一个非常基本和已知的表单场景，我需要在输入旁边正确对齐标签。但是我不知道怎么做 我的目标是将标签与右侧的输入对齐。下面是期望结果的图片示例 为了您的方便，我做了一把小提琴，并澄清我现在所做的- 片段： 简单标签 添加更多文本的标签 短 警告：答案过时 现在你绝对应该避免使用固定宽度。您可以使用flexbox或CSS网格来提出响应性解决方案。请看其他答案 一种可能的解决办法： 给标签显示：内联块 给他们一个固定的宽度 将文本向右对齐 即: 标签{ 显示：内联块； 宽度：140p
简单标签
添加更多文本的标签
短
一种可能的解决办法：
- 给标签
显示：内联块 - 给他们一个固定的宽度
- 将文本向右对齐
标签{
显示：内联块；
宽度：140px；
文本对齐：右对齐；
}
简单标签
添加更多文本的标签
短
我使用类似的方法：
<div class="form-element">
<label for="foo">Long Label</label>
<input type="text" name="foo" id="foo" />
</div>
之前回答过这样的问题，您可以在此处查看结果：
因此，要在小提琴上应用相同的规则，可以使用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;
}
您也可以尝试使用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>
身体{
颜色：白色；
字体系列：arial；
字体大小：1.2米；
}
形式{
保证金：0自动；
填充：20px；
背景：#444；
}
.输入组{
边缘顶部：10px；
宽度：60%；
显示器：flex；
证明内容：之间的空间；
柔性包装：包装；
}
标签，输入{
弹性基准：100px；
}
姓名：
密码：
虽然这里的解决方案是可行的，但我认为最新的技术是更好的解决方案。CSS网格布局允许我们构建一个更优雅的解决方案
下面的CSS提供了一个两列的“设置”结构，第一列应该是右对齐的标签，第二列后面是一些内容。更复杂的内容可以在第二列中显示，方法是将其包装在一个文件中
[作为旁注：我使用CSS添加跟踪每个标签的“：”，因为这是一个风格元素-我的首选项。]
/*CSS*/
分区设置{
显示：网格；
网格模板列：最大内容最大内容；
网格间距：5px；
}
div.settings标签{文本对齐：右；}
div.settings标签：{content:：“；}之后
标签#1
长标签#2
显示内容
标签#3
这里是所有表单标签的通用标签宽度。没有固定宽度的东西
使用所有标签调用setLabelWidth计算器。
此函数将加载UI上的所有标签，并找出最大标签宽度。
将下面函数的返回值应用于所有标签
this.setLabelWidth = function (labels) {
var d = labels.join('<br>'),
dummyelm = jQuery("#lblWidthCalcHolder"),
width;
dummyelm.empty().html(d);
width = Math.ceil(dummyelm[0].getBoundingClientRect().width);
width = width > 0 ? width + 5: width;
//this.resetLabels(); //to reset labels.
var element = angular.element("#lblWidthCalcHolder")[0];
element.style.visibility = "hidden";
//Removing all the lables from the element as width is calculated and the element is hidden
element.innerHTML = "";
return {
width: width,
validWidth: width !== 0
};
};
this.setLabelWidth=函数（标签）{
var d=labels.join（“
”），
dummyelm=jQuery（“#lblWidthCalcHolder”），
宽度；
dummyelm.empty（）.html（d）；
width=Math.ceil（dummyelm[0].getBoundingClientRect（）.width）；
宽度=宽度>0？宽度+5：宽度；
//this.resetLabels（）；//重置标签。
变量元素=角度元素（“#lblWidthCalcHolder”）[0]；
element.style.visibility=“隐藏”；
//在计算宽度并隐藏图元时，从图元中删除所有标签
element.innerHTML=“”；
返回{
宽度：宽度，
有效宽度：宽度！==0
};
};
我知道这是一个旧线程，但更简单的解决方案是在标签中嵌入输入，如下所示：
标签一：
您可以这样做：
HTML:
希望这有帮助！：） 如果某些标签是复选框或单选按钮，我如何使其工作？这些元素的标签与文本框标签的固定宽度相同，这是不需要的。在标签上没有固定宽度的情况下，有没有办法做到这一点？@RebeccaMeritz你的意思是当标记首先有复选框，然后才有标签？您可以向两者添加一个类，并分别设置它们的样式。也许你应该考虑一下。如何使它具有响应性？如何应对i18n？我的意思是，文本标签在不同的语言中有不同的长度，因此我担心如果文本很长，设置固定宽度填充不起作用。@现在，你可能想使用CSS网格。这是标记固定宽度，它应该是动态的，基于最大标签宽度。这很好，但根本不是他所要求的。请看opHey中的图片，你能添加一把小提琴吗？是的，我已经更新了答案，以利用片段。你对哪个Chrome版本和平台有问题？最佳解决方案！现在在Chrome73中工作正常。太棒了！如果将上面的列定义替换为网格模板列：max content 1fr，第二列将使用所有剩余宽度。对我来说，这是此类布局的圣杯，其中不必指定列或内容宽度，所有内容都自动完全适合可用空间。这是一个非常好的解决方案，除了必须硬编码标签的宽度。如果新标签太长，布局将中断。似乎应该有一个更强大的解决方案？我正在寻找一个解决方案（包括标签内的输入），但与对齐的文本
this.setLabelWidth = function (labels) {
var d = labels.join('<br>'),
dummyelm = jQuery("#lblWidthCalcHolder"),
width;
dummyelm.empty().html(d);
width = Math.ceil(dummyelm[0].getBoundingClientRect().width);
width = width > 0 ? width + 5: width;
//this.resetLabels(); //to reset labels.
var element = angular.element("#lblWidthCalcHolder")[0];
element.style.visibility = "hidden";
//Removing all the lables from the element as width is calculated and the element is hidden
element.innerHTML = "";
return {
width: width,
validWidth: width !== 0
};
};
<div class='div'>
<label>Something</label>
<input type='text' class='input'/>
<div>
.div{
margin-bottom: 10px;
display: grid;
grid-template-columns: 1fr 4fr;
}
.input{
width: 50%;
}