Html 如何使输入元素填充父元素？

我得到了以下html：

<div class="container">
    <form>
        <input class="search" type="text" />
        <button class="submit" type="submit">Go</button>
    </form>
</div>

制作以下设计：

---

实际上，我如何让内部文本框填充父对象的宽度？不使用%，因为我需要它一直延伸到按钮，不再进一步。

除非使用javascript或

calc

，否则输入框将在按钮下方重叠，因为它在

px

和

输入中设置了百分比

.search {
    left: 0;
    position: absolute;
    right: 60px;
    width:90%; /* this is the deal here*/
}

对于mozzila，在
中添加以下css。搜索

width: -moz-available;

我会选择Jquery

$(document).ready(function(){
    var inputWidth = $('.container').width() - $('.submit').width();
    $('input').css('width', inputWidth);        
});

我想出了如何使用跨浏览器css：

我将输入包装在一个额外的div中：

<div class="container">
    <form>
        <div class="search-padder">
            <input class="search" type="text" />
        </div>
        <button class="submit" type="submit">Go</button>
    </form>
</div>



.container {
    height: 100%;
    position: relative;
    width: 100%;
}

.search-padder {
    padding-right: 40px;
    width: 100%;
}

.search {
    width: 100%;
}

.submit {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
}


去
.集装箱{
身高：100%；
位置：相对位置；
宽度：100%；
}
.搜索填充器{
右边填充：40px；
宽度：100%；
}
.搜索{
宽度：100%；
}
.提交{
位置：绝对位置；
右：0；
排名：0；
宽度：40px；
}
add
width:calc（100%-40px）
在搜索类中…瞧！！：）使用calc函数需要删除一些旧的浏览器支持，因此我更喜欢一个更受支持的答案，如果它存在的话，即使它稍微复杂一点。使用javascript/jquery为您进行计算。如果您想在没有calc的情况下进行计算，您可以估计%。。。这是我的例子-我希望它能帮助你：@ItayB很好的简单和干净的解决方案。但是submit按钮会随着屏幕的大小而增加，不确定是否需要。问题在jquery中没有标记…这就是我避免使用js解决方案的原因！！：）好的。这是最干净，最优雅的方式与最控制。为什么要在js如此强大的时候避免它呢？即使我同意jquery…但我们不确定OP的要求是什么…否则JQ永远是第一选择！！；）这是真的，但尽管他没有把标签放在那里，但这并不意味着他只想要一个CSS/HTML解决方案。他甚至可能不知道JS或javascript。Imho，如果你不想要某些类型的答案，那么OP应该在问题中指定。除了JS/Jquery对OP不熟悉之外，我找不到任何不使用Jquery的理由。我希望有一个兼容的CSS解决方案，我总是试图将我的JS与设计分开。这是一个很好的解决方案，但我更喜欢与CSS尽可能兼容的解决方案。
<div class="container">
    <form>
        <div class="search-padder">
            <input class="search" type="text" />
        </div>
        <button class="submit" type="submit">Go</button>
    </form>
</div>



.container {
    height: 100%;
    position: relative;
    width: 100%;
}

.search-padder {
    padding-right: 40px;
    width: 100%;
}

.search {
    width: 100%;
}

.submit {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
}