我知道这些问题之前已经得到解答,我已经阅读了主题:
但是我无法在我的情况下设法实现它们,或者它们似乎没有工作,因为我尝试在右边有一个固定宽度,在左边有一个灵活的宽度(与上面的例子不同)。
这是我的问题(这很简单):我有一个带有搜索字段(左)和span元素(右)的表单。 span元素具有固定的宽度和高度。我希望输入符合剩余的左侧空间。
表格:
<div id="container">
<form>
<input type="search" />
<span class="submit"></span>
</form>
</div>
style.css:
#container {
width: 300px;
}
[type="search"] {
/* Positionning
* ------------ */
display: block;
height: 40px;
padding: 0px 10px;
vertical-align: top;
}
.submit {
/* Positionning
* ------------ */
display: block;
height: 40px;
width: 50px;
/* Styling
* ------- */
background-color: #CF0526;
}
根据我的阅读,我认为输入上的width: 100%; overflow: hidden
和跨度上的float: right
是足够的,可悲的是没有。这是jsfiddle我的问题,希望它可以帮到你。
编辑:我将标题从“左侧div”更改为“左侧输入”,因为它可能很重要,尤其是this solution不起作用,而它看起来对于divs定位是准确的。
答案 0 :(得分:1)
您可以尝试使用此属性calc
:
input[type="search"] {
width: calc(100% - 40px);
margin:0;
padding:0;
height:30px;
float:left;
}
.submit {
float:left;
width: 40px;
height: 30px;
background-color: red;
}
演示http://jsfiddle.net/SL3FB/10/ ......可能是compatibility
的问题另一个使用box.sizing
{{1}} compatibility http://jsfiddle.net/SL3FB/18/
答案 1 :(得分:1)
您可以将文本字段中跨度的宽度减去宽度,即100%。
这是小提琴http://jsfiddle.net/SL3FB/15/。
代码是这样的:
width:calc(100% - 50px);
float:left;
让他们float:left;
获得更好的结果!
希望这对你有用。
答案 2 :(得分:1)
1)为输入和范围
设置display: table-cell
2)在跨度上设置固定宽度,并在输入
上设置(技巧:)width:100%
<强> FIDDLE
#container {
width: 300px;
border: 1px solid black;
}
form
{
display:table;
width: 100%;
}
.submit {
display:table-cell;
width: 40px;
height: 30px;
background-color: red;
}
input
{
width: 100%;
display:table-cell;
}
答案 3 :(得分:0)