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

小编典典

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

css

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

我的目标是使标签在右侧输入旁边对齐。这是期望结果的图片示例。

在此处输入图片说明

为方便起见，我做了一个小提琴，以澄清我现在所拥有的-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>

阅读 299

2020-05-16

共1个答案

小编典典

一种可能的解决方案：

给标签display: inline-block;
给他们一个固定的宽度

将文字向右对齐
那是：

label {

display: inline-block;

width: 140px;

text-align: right;

}

<label>Simple label</label>

<input type="text" />

<label>Label with more text</label>

<input type="text" />

<label>Short</label>

<input type="text" />

2020-05-16