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

【问题标题】：CSS for Mobie site - search box and button combined 100% width?移动网站的 CSS - 搜索框和按钮组合 100% 宽度？
【发布时间】：2011-09-28 18:56:23
【问题描述】：

我正在尝试针对移动设备优化我的网站。我使用 1 列液体布局。我遇到的问题是我无法让我的搜索框和提交按钮为 100% 宽。

这就是我想要的：

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

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

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

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

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

【问题讨论】：

标签： css mobile-safari

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

我已经将所有内容放在一个有宽度的 div 中，但这也可以是默认为 100% 宽的 body 标签。

【讨论】：

您的解决方案的唯一问题是我需要为按钮提供足够大的 % 宽度，以便它始终足够宽以容纳文本，即使在查看我网站的最小设备上也是如此。如果我这样做，这意味着在更宽的设备上，按钮看起来非常大。有没有办法让按钮只占用它需要的空间（我认为是默认行为），并让搜索框使用剩下的任何东西？谢谢
在这种情况下，您只能使用 Andres Ilich 提供的解决方案。它很相似，但不是让按钮扩展以适应外部容器的宽度，而内部的按钮保持不变。问题当然是，从视觉上看，盒子不会拉伸整个宽度，因此会产生一些空白。

【解决方案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>

演示：http://jsfiddle.net/andresilich/pHwYG/

【讨论】：