标签和输入之间的空间

Question

我有多个输入/ textarea带有一些标签。我想要的是在标签之间留一个空格并自己输入。问题是标签文本总是不同

例如：

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

在所有普通屏幕上看起来都是正确的，例如：

但是在小型设备上存在问题，因为标签文本可能会在输入区域下方溢出，例如：

对于这类问题的任何建议或最佳实践，我会很高兴:) 谢谢你们。

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您已经知道标签占用的最大空间，请将该空格的值作为min-width应用于所有标签。像这样：

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

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

Answer 3

因此，我们讨论了在您的答案中使用媒体查询（并且您确实要求最佳实践）。我并不是说这总是最好的做法，但会适用于你的情况，并为标签和输入留下了很大的空间，这通常是移动设备的一个好习惯。一种可能对标签进行一些更改的简单方法是使用这样的css：

@media (max-width: 480px) {

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

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

}

请考虑您的所有其他CSS可能与我的不同，但在您的示例中，这可能会很有效。只需将480px设置为满足您需求的最佳选择。这是媒体查询生效时的断点。

仅供参考：MDN - Using media queries