Question

我正在尝试创建一个由三部分组成的小html片段（div元素）：标签，文本框和按钮。

在div元素中，标签位于左侧（自动调整），按钮位于右侧（同样，自动调整），文本框应占用父div元素内的所有剩余空间。 / p>

这是我尝试过的（假设我希望我的div宽度为400像素）：

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

问题是，我的文本框没有自动调整大小。将“width = 100％”添加到文本框不起作用。

如何让它占用标签和按钮之间的所有剩余空间？理想情况下，应该只应用一些样式，而不是引入新元素。

（我猜这个问题与div元素无关，但恰好是我的工作场景。）

Answer 1

也许这样的事情就是你想要的。是的，我知道这是作弊。是的，我同意@Paul re：label，所以我刷他的身份。：）

编辑：强制性Self-Referencing Demo

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

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

<强> HTML：

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

Answer 2

我能想到做这项工作的唯一方法就是用百分数。我将所有内容都包含在单独的div中（可能是不成功的），然后为每个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>

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

埃利奥特

Answer 3

使用<input>将<div>打包在overflow: hidden中会有帮助吗？

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

请参阅xHTML/CSS: How to make inner div get 100% width minus another div width。

虽然这不是主题，但请注意，您的标签应该是<label>。

<div style="width: 400px;">
    <label for="my-very-special-input" style="float: left;">Label</label>
    <div style="overflow: hidden;">
        <input id="my-very-special-input" style="width: 100%;">
    </div>
    <button type="button" style="float: right;">Click</button>
</div>

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

3 个答案: