一尘不染

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

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>

阅读 264

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