标签和输入之间的空格

我有多个输入/文本区和一些标签。我想要的是在标签之间留出空间并自行输入。问题是，标签文本始终是标签和输入之间的空格

不同。例如：

<p class="formfield"> 
    <label translate="case.calculation.label.price"></label> 
    <input ng-model="part.priceByUser" class="table-form"> 
</p> 
<p class="formfield"> 
    <label for="textarea" translate="case.calculation.parts.description"></label> 
    <textarea id="textarea" rows="3" ng-model="part.descriptionByUser" class="table-form"></textarea> 
</p>

的样子：

我想这可能与固定标签宽度来完成，所以我说像：

.formfield label { 
    padding-right:10px; 
    width: 15%; 
}

随着它看起来更相似ECT就一切正常屏幕例如：

，但对小型设备如移动电话问题，在标签文本可能会溢出下方输入区域如：

我将竭诚为任何意见或最佳练习这种问题:) 谢谢你们。

来源

2016-05-16 Andurit

将固定宽度添加到'min-width' css属性。 –

Flexbox或表格单元格将为您提供帮助。如果你将'display'设置为'table'（parent）和'table-cell'（对于childrens），所有列将自动重新排列 –

我只需在带有媒体查询的较小设备上将标签和输入宽度设置为100％。 – thepio

因此，我们讨论了在评论中使用媒体查询（并且您确实要求提供最佳实践）。我并不是说这总是最好的做法，但会适用于您的情况，并为标签和输入留下很多空间，这通常是移动领域的良好做法。一个简单的方法可能是做一些更改标签是使用CSS这样的：

@media (max-width: 480px) { 

    .formfield label { 
    padding-right:0px; 
    width: 100%; 
    } 

    .formfield input, .formfield textarea { 
    width: 100%; 
    } 

}

请考虑您的其他所有的CSS可能是从我的，但在你的例子不同，这可能会工作带来极大。只需设置480px以满足您的最佳需求。这是媒体查询生效时的断点。

仅供参考：MDN - Using media queries

来源

2016-05-16 10:49:36 thepio

你是对的，你必须设置固定标签宽度（15%不是固定宽度）。我也将使用表格布局更好的外观：

.formfield { 
 
    display: table; 
 
    width: 100%; 
 
    padding-bottom: 25px; 
 
} 
 
.formfield label, 
 
.formfield .input-wrapper { 
 
    display: table-cell; 
 
    vertical-align: top; 
 
} 
 
.formfield label { 
 
    width: 100px; 
 
} 
 
.formfield .input-wrapper .table-form { 
 
    width: 100%; 
 
}

<div class="formfield"> 
 
    <label for="price">Price</label> 
 
    <div class="input-wrapper"> 
 
    <input id="price" class="table-form" /> 
 
    </div> 
 
</div> 
 
<div class="formfield"> 
 
    <label for="textarea">Description</label> 
 
    <div class="input-wrapper"> 
 
    <textarea id="textarea" rows="3" class="table-form"></textarea> 
 
    </div> 
 
</div>

来源

2016-05-16 10:32:01 Justinas

如果你已经知道了最大的空间，由标签采取然后应用空间的价值为min-width所有标签。事情是这样的：

.formfield label { 
    padding-right:10px; 
    width: 15%;  /* to maintain responsive */ 
    min-width: 120px; /* minimum threshold width */ 
}

这可以确保标签的最小宽度不小于120px即使在宽度15%小于120px。因此，布局将仍然响应。

来源

2016-05-16 10:34:33

标签和输入之间的空格

回答

相关问题