Mobie网站的CSS-搜索框和按钮组合100%宽度？

我试图优化我的移动网站。我将使用1列液体布局。我的问题是，我不能得到我的搜索框和提交按钮是100%宽

这就是我想要的：

我无法设置搜索框的固定宽度（输入）。它似乎也忽略了宽度：100%和绝对定位。有没有办法做到这一点？我想，如果我将输入设为内联元素，它可能会流到100%，但它似乎没有。谢谢

更新-关于这个：

我把搜索框做了100%宽，但把它放在一个容器分区中，右边有5 em的填充。由于集装箱舱是100%宽的，它将按钮敲到了新的一行，但是我用绝对定位“举起”了按钮

当我调整窗口大小时，它似乎工作得很好。我认为如果我用em代替px来表示宽度，布局会更稳定，这意味着我必须规范文本大小

我的解决方案有什么问题吗？谢谢

请参见此处：

请注意，我必须关闭两个输入的边框，因为这两个输入加起来的数字将大于100%（即80%宽度加上2px（每边的边框））。您可以分别输入79%和19%，然后尝试放置1px边框

---

我已经将所有内容放在一个具有宽度的div中，但这很容易成为body标记，默认情况下，body标记的宽度为100%。

您需要正确地包含输入字段，并且宽度需要相对于其容器。试着这样做：

CSS

.searchbar {
    width:100%;
}

.searchfield, .searchbtn {
    float:left;
}

.searchfield {
    width:70%;
    margin-right:5%;
}

.searchfield input {
    width:100%;
}

.searchbtn {
    width:25%;
}

HTML

<div class="searchbar">
    <div class="searchfield">
        <input type="text" name="Search" value="Search" />
    </div>
    <div class="searchbtn">
        <input type="submit" value="Search" />
    </div>
</div>

演示：

我把搜索框做了100%宽，但把它放在一个容器分区中，右边有5 em的填充。由于集装箱舱是100%宽的，它将按钮敲到了新的一行，但是我用绝对定位“举起”了按钮

---

当我调整窗口大小时，它似乎工作得很好。我认为如果我使用em而不是px来表示宽度，布局会更稳健，这意味着我必须规范文本大小。

你的解决方案唯一的问题是，我需要给按钮一个足够大的%宽度，以便它总是足够宽，可以容纳文本，即使是在查看我网站的最小设备上。如果我这样做，这意味着在更宽的设备上，按钮看起来大得离奇。难道没有办法让按钮占据它所需要的空间（我认为是默认行为），让搜索框使用剩下的任何东西吗？在此情况下，感谢您仅限于Andres Ilich提供的解决方案。这是类似的，但不是让按钮扩展以适应外部容器的宽度，而内部的按钮保持不变。当然，问题是，从视觉上看，盒子不会延伸整个宽度，因此会产生一些空白。