html - 在内容框的剩余宽度中输入带有标签的标签

我的自定义内容框的样式有些麻烦。内容框包含一些label和input字段。内容框的width为500px。

有些labels长于其他'rows'，但是输入应始终与窗口一样大（-有点空白）。

这是我现在拥有的HTML：

<div class="content">
    <div class="row">
        <label for="test1">This is a test #1</label>
        <input type="text" name="test1">
    </div>
    <div class="row">
        <label for="test2">This is a test #2</label>
        <input type="text" name="test2">
    </div>
    <div class="row">
        <label for="test3">But this is a test with a much longer label</label>
        <input type="text" name="test3">
    </div>
</div>

这是CSS：

.content {
    border: 1px solid #000;
    width: 500px;
    height: 500px;
}

.row {
    margin-top: 5px;
}

input {
    width: 385px;
}

如此处的小提琴所示：https://jsfiddle.net/4ga3533o/您可以看到前两个input正常工作，但是到第三个label时在之下，因为宽度比内容框长，我可以使其工作以使标签可以具有不同的长度，但是宽度仅占用宽度的剩余空间吗？

最佳答案

display: flex是解决您问题的最佳解决方案。试试这个代码。

<div class="content">
  <div class="form-wrap">
    <label for="test1">This is a test #1</label>
    <input type="text" name="test1">
  </div>
  <div class="form-wrap">
    <label for="test2">This is a test #2</label>
    <input type="text" name="test2">
  </div>
  <div class="form-wrap">
    <label for="test3">But this is a test with a much longer label</label>
    <input type="text" name="test3">
  </div>
</div>

.content {
  border: 1px solid #000;
  width: 500px;
  height: 500px;
}

.row {
  margin-top: 5px;
}

input {
  width: 385px;
}

.form-wrap {
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
}

.form-wrap label {
  width: 40%;
}

关于html - 在内容框的剩余宽度中输入带有标签的标签，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50150852/