Question

我有一个包含标签后跟输入标签的div。我希望标签是一个恒定的宽度，而文本框将扩展为其父级中遗留的任何内容。

<div class="user">
    <label for="username">Username</label>
    <input type="text" name="USER" id="username">
</div>

目前我将两个控件都向左浮动。

.user label, .user input {
   float: left;
}

如果我将标签宽度设置为150px，我怎样才能让文本框占用剩余空间但不会丢弃到另一行？我试过宽度'自动'，它似乎没有做任何事情。

Answer 1

这是一个使用CSS calc()的简单解决方案。我跳过float，因为它不需要，但如果你愿意，可以使用它。

需要注意的是，calc()的浏览器支持率略高于flex，并使您的CSS规则更加清晰。

.user label {
  display: inline-block;
  width: 150px;
}
.user input {
  width: calc(100% - 160px);
}

<div class="user">
    <label for="username">Username</label>
    <input type="text" name="USER" id="username">
</div>

Answer 2

使用 CSS3 flexbox 。

.user {
  display: flex;
}
.user label {
  width: 150px;
  background: pink;
}
.user input {
  flex: 1; /*expand*/
}

<div class="user">
  <label for="username">Username</label>
  <input type="text" name="USER" id="username">
</div>

使用 CSS表格（附加标记）。

.user {
  display: table;
  width: 100%;
}
.user span {
  display: table-cell;
}
.user span:first-child {
  width: 150px;
  background: pink;
}
.user input {
  box-sizing: border-box;
  width: 100%;
}

<div class="user">
  <span><label for="username">Username</label></span>
  <span><input type="text" name="USER" id="username"></span>
</div>

使用 calc（）+ float 。

.user:after {
  /*clear float - may not necessary in this case as 100% width*/
  content: "";
  display: table;
  clear: both;
}
.user label {
  float: left;
  width: 150px;
  background: pink;
}
.user input {
  float: left;
  box-sizing: border-box;
  width: calc(100% - 150px);
}

<div class="user">
  <label for="username">Username</label>
  <input type="text" name="USER" id="username">
</div>

Answer 3

使用flexbox做得最好：

    .user {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }
    .user label{
        width: 150px;
    }

    .user input {
        width: 100%;
        flex-grow: 1;
        align-self:  flex-end;
    }

响应式表单如何使文本框扩展？

3 个答案: