左输入占用所有可用空间

时间:2013-12-17 12:39:33

标签: css input html

我知道这些问题之前已经得到解答,我已经阅读了主题:

但是我无法在我的情况下设法实现它们,或者它们似乎没有工作,因为我尝试在右边有一个固定宽度,在左边有一个灵活的宽度(与上面的例子不同)。

这是我的问题(这很简单):我有一个带有搜索字段(左)和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定位是准确的。

4 个答案:

答案 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)

使用CSS Tables

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)

这对你有用吗?

http://jsfiddle.net/SL3FB/4/

我给你的搜索宽度为85%,所以它再次适合红色框。

.search {
    width:85%;
}