在输入旁边对齐表单中的标签 [英] Align labels in form next to input

问题描述

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

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

为了您的方便和澄清我现在所拥有的，我做了一个小提琴 - http://jsfiddle.net/WX58z/

片段:

<label>简单标签</label><input type="text"/>
<div class="block"><label>带有更多文本的标签&​​lt;/label><input type="text"/>

<div class="block"><标签>短</标签><input type="text"/>

解决方案

警告:过时的答案

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

---

一种可能的解决方案:

• 给标签display: inline-block;
• 给它们一个固定的宽度
• 文本右对齐

即:

label {显示:内联块；宽度:140px；文本对齐:右；} 

<label>简单标签</label><input type="text"/>
<div class="block"><label>带有更多文本的标签&​​lt;/label><input type="text"/>

<div class="block"><标签>短</标签><input type="text"/>

JSFiddle

I have very basic and known scenario of form where I need to align labels next to inputs correctly. However I don't know how to do it.

My goal would be that labels are aligned next to inputs to the right side. Here is picture example of desired result.

I have made a fiddle for your convenience and to clarify what I have now - http://jsfiddle.net/WX58z/

Snippet:

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

解决方案

WARNING: OUTDATED ANSWER

Nowadays you should definitely avoid using fixed widths. You could use flexbox or CSS grid to come up with a responsive solution. See the other answers.

---

One possible solution:

• Give the labels display: inline-block;
• Give them a fixed width
• Align text to the right

That is:

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

这篇关于在输入旁边对齐表单中的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！