在输入旁边对齐表单中的标签

Posted 2023-03-05

技术标签:

【中文标题】在输入旁边对齐表单中的标签【英文标题】：Align labels in form next to input 【发布时间】：2012-03-30 00:02:32 【问题描述】：

我有一个非常基本且已知的表单场景，我需要正确对齐输入旁边的标签。但是我不知道该怎么做。

我的目标是将标签与右侧的输入对齐。这是所需结果的图片示例。

为了您的方便和澄清我现在拥有的东西，我做了一个小提琴 - 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>

【问题讨论】：

【参考方案1】：

警告：过时的答案

如今，您绝对应该避免使用固定宽度。您可以使用 flexbox 或 CSS 网格来提出响应式解决方案。查看其他答案。

一种可能的解决方案：

给标签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>

JSFiddle

【讨论】：

如果某些标签是复选框或单选按钮，我该如何进行这项工作？这些元素的标签最终具有与不需要的文本框标签相同的固定宽度。有没有办法在标签上没有固定宽度的情况下做到这一点？ @RebeccaMeritz 你的意思是当标记首先有复选框，然后是标签？您可以为两者添加一个类，并分别设置它们的样式。或许你应该 ask a new question 讨论一下。如何使这个响应？以及如何应对 i18n？我的意思是文本标签在不同语言中的长度不同，因此我担心如果文本很长，设置固定宽度填充不起作用。 @Azimuth 现在，您可能想改用 CSS 网格。这是标记固定宽度，它应该是动态的，基于最大标签宽度。【参考方案2】：

虽然这里的解决方案是可行的，但我认为更新的技术已经成为更好的解决方案。 CSS 网格布局 让我们能够构建更优雅的解决方案。

下面的 CSS 提供了一个 2 列的“设置”结构，其中第一列应该是右对齐的标签，然后是第二列中的一些内容。更复杂的内容可以通过将其包装在

中来呈现在第二列中。

[附带说明：我使用 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>

【讨论】：

嘿，你能加个小提琴吗？是的，我已经更新了答案以使用 sn-ps。您在使用哪个 Chrome 版本和平台时遇到问题？最佳解决方案！现在在 Chrome 73 中运行良好。太棒了！如果将上面的列定义替换为grid-template-columns: max-content 1fr;，则第二列将使用所有剩余宽度。对我来说，这是此类布局的圣杯，无需指定列或内容宽度，并且所有内容都自动完美地适合可用空间。【参考方案3】：

之前回答过这样一个问题，你可以在这里看看结果：

Creating form to have fields and text next to each other - what is the semantic way to do it?

因此，要将相同的规则应用于您的小提琴，您可以使用 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;

updated fiddle

【讨论】：

这是一个非常好的解决方案，除了您必须对标签的宽度进行硬编码。如果新标签太长 - 布局会中断。似乎应该有一个更强大的解决方案？【参考方案4】：

我使用类似的东西：

<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;

【讨论】：

【参考方案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>

【讨论】：

这很漂亮，但根本不是他想要的。见op中的图片【参考方案6】：

我知道这是一个旧线程，但更简单的解决方案是在标签中嵌入一个输入，如下所示：

&lt;label&gt;Label one: &lt;input id="input1" type="text"&gt;&lt;/label&gt;

【讨论】：

我正在寻找解决方案（包括标签内的输入），但文本对齐【参考方案7】：

你可以这样做：

HTML：

<div class='div'>
<label>Something</label>
<input type='text' class='input'/>
<div>

CSS：

.div
      margin-bottom: 10px;
      display: grid;
      grid-template-columns: 1fr 4fr;


.input
       width: 50%;

希望这会有所帮助！ :)

【讨论】：

【参考方案8】：

这是所有表单标签的通用标签宽度。没有固定宽度。

使用所有标签调用 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
            ;

        ;

【讨论】：

以上是关于在输入旁边对齐表单中的标签的主要内容，如果未能解决你的问题，请参考以下文章

将标签放在输入表单旁边

在文本输入下方对齐标签

为啥我的 CSS 样式输入不会位于其标签旁边？

将按钮与带有标签的输入表单对齐

如何正确对齐表单标签？

在 tkinter python 中的输入框旁边打包标签