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

我有一个非常基本和已知的形式场景，我需要将输入正确地与输入对齐。但是我不知道该怎么做。在输入旁边的表格中对齐标签

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

enter image description here

我已经做了小提琴为您提供方便，并澄清什么，我现在有 - 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>

来源

2012-03-13 sed

138

一个可能的解决方案：

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

来源

2012-03-13 14:59:39 bfavaretto

怎么办如果某些标签是复选框或单选按钮，我会进行这项工作吗？这些元素的标签以与文本框标签相同的固定宽度结束，这是不期望的。有没有办法在标签上没有固定宽度的情况下做到这一点？ – 2014-01-14 12:15:38

@RebeccaMeritz你的意思是当标记第一个复选框，然后标签？您可以为两者添加一个类，并分别设置它们的样式。也许你应该[问一个新的问题]（http://stackoverflow.com/questions/ask）。 – bfavaretto 2014-01-14 14:34:34

我用类似这样：

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

来源

2012-03-13 15:01:03

之前回答的问题，如这个，你可以看看，结果在这里：

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

来源

2012-03-13 15:11:34

您也可以尝试使用柔性盒

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

来源

2016-09-05 16:17:05 user6797117

这很漂亮，但根本不是他所要求的。请参阅op – Patrick 2017-03-25 17:37:08

虽然这里的解决方案是可行的，但最近的技术已经取得了什么，我认为这是一个更好的解。 CSS Grid Layout允许我们构建更优雅的解决方案。

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

[作为一个侧面说明：我用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>

来源

2018-01-22 16:43:07

中的图片嘿，你可以加一个小提琴吗？ – sed 2018-01-23 10:54:47

是的，我已经更新了使用片段的答案。 – 2018-02-07 20:13:34

这适用于FF，但不适用于Chrome – 2018-02-19 20:34:45

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

回答

相关问题