时间戳

首页 > 解决方案 > 在内容框中输入带有标签的剩余宽度

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

问题描述

我在自定义内容框的样式方面遇到了一些问题。内容框包含几个label和input字段。内容框有一个width`500px。

其中一些labels比其他的长，但是输入应该总是和窗口一样大（- 一点空白）。

这是我现在拥有的 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/你可以看到前 2 个'rows'工作正常，但是到第三个，因为宽度比内容框长，我怎么input能label让它工作，这样标签可以有不同的长度，但宽度只占用宽度的剩余空间？

标签： htmlcsswidth

解决方案

你可以flex

.content {
  border: 1px solid #000;
  width: 500px;
  height: 500px;
}
.row {
  margin-top: 5px;
  display: flex;
}
input {
  flex: 1;
}
label {
  margin-right: 10px;
}
<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>

推荐阅读