Question

我在这里搜索并发现了许多问题和答案，但我无法让这件事发挥作用。

您可以在此处查看我的HTML和CSS：http://jsfiddle.net/PqjqF/2/

HTML

<div id="SearchBox">
    <div id="SearchFieldContainer">
        <input class="SearchField" type="text" name="search" placeholder="Search..."/>
    </div>
    <div id="SearchButtonContainer">
        <a href="#" class="SearchButton">Search</a>
    </div>
</div>

CSS

#SearchBox {
    width: *;
    background-color: #fff;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #d2d2d2;
    height: 40px;
    padding: 14px 8px 8px 8px;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(92%,#f3f3f3));
    background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 92%); /* Chrome10+,Safari5.1+ */
    background: linear-gradient(to bottom, #ffffff 0%,#f3f3f3 92%); /* W3C */
}

#SearchFieldContainer {
    float: left;
    width: 100%;
}

#SearchButtonContainer{
   float:left;
}

.SearchField {
    border: 1px solid #bdbdbd;
    background: #f5f5f5;
    -webkit-border-radius: 60px;
    border-radius: 60px;
    color: #0a0705;
    -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 1px 1px;
    box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 1px 1px;
    padding:8px;
    margin-bottom:20px;
    width:100%;
}

.SearchField:focus {
   background: #fff;
   color: #000000;
}

.SearchButton {
    -webkit-box-shadow: 0px 2px 2px 0px #8a8a8a;
    box-shadow: 0px 2px 2px 0px #8a8a8a;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #2f3c47), color-stop(1, #0f1011) );
    background-color:#2f3c47;
    -webkit-border-radius:42px;
    border-radius:42px;
    border:1px solid #0d060d;
    display:inline-block;
    color:#ffffff;
    font-family:arial;
    font-size:18px;
    font-weight:bold;
    padding:5px 18px;
    text-decoration:none;
}

我想要的是输入字段将占用它所拥有的所有空间，并且搜索按钮位于它旁边，在同一行。

我尝试了很多东西，比如隐藏溢出和其他东西，但它拒绝工作： - /

这里有任何帮助吗？

谢谢， - Shai

Answer 1

嗯，试试吧：

#SearchFieldContainer {
    float: left;
    width: 50%;
}

#SearchButtonContainer{
   float:left;
   width: 50%;
}

因此两个div都占据宽度的50％= 100％宽度。需要更多的工作才能完美贴合，但基本上它应该起作用。记得“清除”（如果你不知道，请寻找清楚：两者）。

Answer 2

你的问题是，某些事情并没有达到100％。例如，文本字段本身设置为100％宽度，但具有填充，使其大于100％。如果将文本字段包装在边框中，则可以看到它超出了包含div的范围。有几种方法可以解决这个问题...要么删除填充，将填充计算为总的100％宽度，要么使用CSS：box-sizing: border-box;它告诉浏览器计算宽度，包括填充和边框。 / p>

两个容器都是如此。

我将首先使用上面提到的box-sizing方法......

请参阅以下小提琴：http://jsfiddle.net/PqjqF/4/

在这里，我已将box-sizing: border-box;添加到您的两个容器，文本字段和按钮中。我将边框留在原位，以便您可以看到容器的边缘。（这是调试布局以查看盒子位置的好方法）

我已将容器的宽度分别更改为80％和20％，并将文本字段的宽度设置为100％。您也可以在按钮上应用100％的宽度，使其填充容器。

有关浏览器兼容性的信息，请参阅Can I Use It?。

现在是一个没有box-sizing: border-box; ...

的解决方案

请参阅以下小提琴：http://jsfiddle.net/PqjqF/5/

在这里，我计算了填充的百分比，在这种情况下，1％是元素本身的宽度。因此，左右填充1％（顶部和底部无关紧要），98％宽度= 100％。

Answer 3

稍微更改您的HTML，让div#SearchButtonContainer之前显示div#SearchFieldContainer。
将margin-right添加到div#SearchFieldContainer为该按钮留出足够的空间。删除其float: left;样式，默认情况下会扩展100％宽度（右边有一些边距）;
将float: right;添加到div#SearchButtonContainer。

在jsFiddle

2个div，并排占据100％的空间

3 个答案: