移动网站的CSS - 搜索框和按钮组合100％宽度？

Question

我正在尝试针对移动设备优化我的网站。我正在进行1列液体布局。我遇到的问题是我无法获得我的搜索框并提交100％宽的按钮。

这就是我想要的：

我无法为搜索框设置固定宽度（输入）。它似乎也忽略了宽度：100％和绝对定位。无论如何要实现这个目标吗？我想也许如果我输入一个内联元素它会流到100％，但它似乎没有。谢谢

更新 - 这个怎么样： http://jsfiddle.net/jdln/3ms5f/

我已将搜索框设为100％宽，但将其放在容器div中，右边有5em的填充。由于容器div是100％宽，它将按钮敲到新行，但我已经用绝对定位“抬起”了按钮。

当我调整窗口大小时似乎运行良好。如果我使用em代替宽度而不是px，我认为布局会更强大，这意味着我必须规范文本大小。

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

Answer 1

http://jsfiddle.net/jdln/3ms5f/

我已将搜索框设为100％宽，但将其放在容器div中，右边有5em的填充。由于容器div是100％宽，它将按钮敲到新行，但是我已经用绝对定位“抬起”了按钮。

当我调整窗口大小时似乎运行良好。如果我使用em代替宽度而不是px，我认为布局会更强大，这意味着我必须规范文本大小。

Answer 2

见这里：http://jsfiddle.net/chricholson/wCvVB/9/

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

我已将所有内容放入宽度为div的div中，但这可能很容易成为body标签，默认情况下为100％宽。

Answer 3

您需要正确包含输入字段，宽度需要相对于其容器。尝试这样的事情：

<强> 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>

DEMO：http://jsfiddle.net/andresilich/pHwYG/