css - 使 HTML 输入拉伸(stretch)以填充容器中的空间

Question

有一个<div id="MyDiv">根据页面宽度调整大小的元素。它包含 <input>和 <a>元素。

如何制作 <a>在 <div> 的右侧对齐和 <input>拉伸(stretch)以适应 <div> 之间的自由空间的左侧和 <a>是右边吗？

还有 <a>不应该跳到下一行并且还定义了min-width和 max-width在容器上。这是代码:

<div id="MyDiv" style="background:#AAAAAA; width:100%; min-width:300px; max-width:600px;">
    <input type="text" id="MyInput"/>
    <a id="MyButton" href="#">Button</a>
</div>

和demo .

Answer 1

这可以通过 CSS3 轻松完成，尽管它在 IE9 或更低版本中不起作用。 IE10 是第一个支持该标准的 Internet Explorer 版本。其他浏览器already support相关Flexible Box属性。

div {
  background: #AAAAAA;
  width: 100%;
  min-width: 300px;
  max-width: 600px;
  display: -webkit-flex;
}

input {
  -webkit-flex: 1;
}

a {
  margin: 0 10px;
}

<div>
  <input type="text" />
  <a href="#">Button</a>
</div>