说,我有以下无序列表.按钮有width: auto.如何设置元素的样式,以便#textField尽可能地拉伸,因此#textField按钮的宽度加起来会达到100%？即#textField宽度==(宽度的100%) - (按钮的计算宽度).
<ul>
<li>
<input id="textField" type="text" /><input type="button" />
</li>
</ul>
因此,例如,假设100%宽度li为100像素:如果按钮的计算宽度为30px,则#textField宽度为70px; 如果按钮的计算宽度为25px,则#textField宽度将变为75px.
Wex*_*Wex 52
您可以使用的混合物迅速达到这种效果float和overflow: hidden:
<ul>
<li>
<input class="btn" type="button" value="Submit"/>
<div class="inputbox"><input id="textField" type="text" /></div>
</li>
</ul>
CSS:
ul {
list-style: none;
padding: 0; }
.btn { float: right; }
.inputbox {
padding: 0 5px 0 0;
overflow: hidden; }
.inputbox input {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
预览(带框大小):http://jsfiddle.net/Wexcode/E8uHf/546/
以下是没有盒子尺寸的样子:http://jsfiddle.net/Wexcode/E8uHf/
试试这个:
HTML
<ul>
<li>
<input id="textField" type="text" /><input value="Button!" class="btn"type="button" />
</li>
</ul>
CSS
ul li {
width:100%;
}
#textField, .btn {
float:left;
}
#textField {
width:70%;
}
.btn {
width:auto;
}
这是一个演示:
http://jsfiddle.net/andresilich/RkCvf/
以下是我为您考虑的几个演示.
这个演示使用CSS3的flex-box模型input在没有给定宽度的情况下在其区域内拉伸场.但是,IE8及以下版本不支持.
而这个演示只使用CSS模仿的表.IE8及以上版本支持它.
使用支持CSS-2.x的布局引擎的用户代理中的CSS可以实现这一点:
…
<style type="text/css">
.full-width {
width: 100%;
}
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}
</style>
</head>
<body>
<ul class="table">
<li class="row">
<span class="cell full-width">
<input type="text" id="textField" class="full-width" />
</span>
<span class="cell">
<input type="button" value="foobar" />
</span>
</li>
</ul>
</body>
在以下浏览器中测试为阳性:
请注意,input由于固定宽度,元素上的填充和边距会发生干扰.
但是:我看没有很好的理由,为什么你应该不使用table元素在这里(表格和CSS 不混合).在语义上它是有意义的(表可以序列化),并且兼容性很可能比display上面的CSS 属性值更好:
<body>
<ul>
<li>
<table class="full-width"
summary="Input text field with “foobar” button">
<tr>
<td class="full-width">
<input type="text" id="textField" class="full-width" />
</td>
<td>
<input type="button" value="foobar" />
</td>
</tr>
</table>
</li>
</ul>
</body>
这也有可能是你应该使用只有一个table元素在这里摆在首位.