Layout 如何使div元素的部分自动调整大小？

我试图创建一个小的html片段（一个

div

元素），它由三部分组成：标签、文本框和按钮

在该div元素中，标签将位于左侧（自动调整大小），按钮将位于右侧（再次调整大小），文本框应占据父

div

元素中的所有剩余空间

这就是我尝试过的（假设我希望我的

div

为400像素宽）：

标签
点击

问题是，我的文本框不会自动调整大小。将“宽度=100%”添加到文本框不起作用

怎样才能让它占据标签和按钮之间的所有剩余空间？理想情况下，这应该通过应用一些样式来完成，而不是通过引入新元素

---

（我想这个问题不仅仅与

div

元素有关，这恰好是我的工作场景。）

我能想到的唯一方法是使用百分比。我将所有内容都包含在单独的分区中（可能不成功），然后将百分比分配给每个分区。请看：

<div style="width=400px">
<div style="float:left; width:10%">Label</div>
<div style="float: left; width:70%"><input style="width:100%"></div>  <!-- doesn't work -->
<div style="float: right width:20%"><button type='button' style=''>Click</button></div>

标签
点击

这决不是一个完美的解决方案，但希望它能在一定程度上满足您的需求

---

Elliott

如果使用

溢出：隐藏
将
包装在
中，是否有帮助

<div style="width: 400px;">
    <div style="float: left;">Label</div>
    <div style="overflow: hidden;">
        <input style="width: 100%;">
    </div>
    <button type="button" style="float: right;">Click</button>
</div>


标签
点击

看

尽管这不是主题，但请注意，您的标签应该是


标签
点击
也许像这样的东西正是你想要的。是的，我知道这是作弊。是的，我同意@Paul re:label，所以我刷了他的id:）

编辑：必须

警告：未在所有浏览器中测试

CSS:

div {
  display: table;
  width: 400px;
  white-space: nowrap;
}

label {
  display: table-cell;
  padding-right: 3px;
  width: 1em;
}

input {
  display: table-cell;
  width: 100%;
}

span {
  display: table-cell;
  padding-left: 6px;
  width: 1em;
}

<div>
  <label for="my-very-special-input">Label</label>
  <input id="my-very-special-input"/>
  <span><button type="button">Click</button></span>
</div>

HTML:

div {
  display: table;
  width: 400px;
  white-space: nowrap;
}

label {
  display: table-cell;
  padding-right: 3px;
  width: 1em;
}

input {
  display: table-cell;
  width: 100%;
}

span {
  display: table-cell;
  padding-left: 6px;
  width: 1em;
}

<div>
  <label for="my-very-special-input">Label</label>
  <input id="my-very-special-input"/>
  <span><button type="button">Click</button></span>
</div>


标签
点击
@ghoppe:太好了，正是我需要的。