有一个<div id="MyDiv">元素根据页面宽度调整大小.它包含<input>和<a>元素.
如何<a>通过拉伸<div>和<input>拉伸的右侧对齐以适应<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>
和演示.
and*_*dyb 11
这可以通过CSS3轻松完成,尽管它不适用于IE9或更低版本.IE10是第一个支持该标准的Internet Explorer版本.其他浏览器已通过前缀或未加前缀的规则支持这些属性.
请参阅demo,它只是Webkit,但您可以为 Flexible Box规则添加其他浏览器供应商前缀,以支持Firefox和Opera.
CSS
div {
background: #AAAAAA;
width: 100%;
min-width: 300px;
max-width: 600px;
display: -webkit-flex;
}
input {
-webkit-flex: 1;
}
a {
margin: 0 10px;
}HTML
<div>
<input type="text" />
<a href="#">Button</a>
</div>