无论文本的长度如何均匀地在标签和输入字段之间添加空格？ [英] How do I evenly add space between a label and the input field regardless of length of text?

问题描述

假设我有10个输入字段，并且在左侧的输入字段之前，我有用于保存文本以指示用户应该输入字段的span标签。我做了一些东西，但我不确定如何在span标签和输入字段之间添加空格，无论文本有多大？

像这样：

label 使用标签 $ c>而不是 span 。它的意思是与输入配对，并保留一些额外的功能（点击标签集中输入）。

这可能正是你想要的：

HTML：

 < label for =dummy1> title for dummy1：< /标签> 
< input id =dummy1name =dummy1value =dummy1> 
 
< label for =dummy2> dummy2的较长标题：< / label> 
< input id =dummy2name =dummy2value =dummy2> 
 
< label for =dummy3> dummy3甚至更长的标题：< / label> 
< input id =dummy3name =dummy3value =dummy3> 
  

CSS：

  label {
 width：180px; 
 clear：left; 
 text-align：right; 
 padding-right：10px; 
} 
 
输入，标签{
 float：left; 
} 
  

jsfiddle DEMO here。

Let's say I have 10 input fields and before the input fields on the left side I have span tag that holds the text to indicate what the user should enter into the field. I did some stuff but I am unsure how to add space in between the span tag and the input field regardless of how big the text is?

Like this:

解决方案

Use label instead of span. It's meant to be paired with inputs and preserves some additional functionality (clicking label focuses the input).

This might be exactly what you want:

HTML:

<label for="dummy1">title for dummy1:</label>
<input id="dummy1" name="dummy1" value="dummy1">

<label for="dummy2">longer title for dummy2:</label>
<input id="dummy2" name="dummy2" value="dummy2">

<label for="dummy3">even longer title for dummy3:</label>
<input id="dummy3" name="dummy3" value="dummy3">

CSS:

label {
    width:180px;
    clear:left;
    text-align:right;
    padding-right:10px;
}

input, label {
    float:left;
}

jsfiddle DEMO here.

这篇关于无论文本的长度如何均匀地在标签和输入字段之间添加空格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！