css - 左输入占用所有可用空间

Question

我知道这个问题之前已经回答过并且我已经阅读了主题:

• Make div take all space left after another div
• Expand div to take remaining width
• Expand div to max width when floatleft is set
• The magic of overflow hidden (外部)

但是我无法在我的案例中实现它们，或者它们似乎根本不起作用，因为我尝试在右侧设置固定宽度，在左侧设置灵活宽度(与上述示例不同)。

这是我的问题(相当简单):我有一个带有搜索字段(左)和 span 元素(右)的表单。 span 元素具有固定的宽度和高度。我希望输入适合剩余的左侧空间。

形式:

<div id="container">
    <form>
        <input type="search" />
        <span class="submit"></span>
    </form>
</div>

样式.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 和 span 上的 float: right 就够了，可惜不行。这是一个jsfiddle我的问题，希望它可以帮助你。

编辑:我将标题从“left div”更改为“left input”，因为这可能很重要，特别是因为 this solution虽然它看起来对 div 定位准确，但不起作用。

Answer 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 的解决方案 compatibility : http://jsfiddle.net/SL3FB/18/