1

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

你可以在这里查看我的 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;
}

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

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

这里有什么帮助吗？

谢谢， - 谢

4

3 回答 3

0

嗯，试试：

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

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

所以两个 div 各占宽度的 50% = 100% 宽度。需要更多的工作才能完美契合，但基本上它应该可以工作。记住要“清除”（如果您不知道，请查找 clear:both）。

于 2013-03-27T19:34:13.717 回答
0

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

您的两个容器也是如此。

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

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

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

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

请参阅我可以使用它吗？用于浏览器兼容性的框大小。

现在一个没有box-sizing: border-box;...的解决方案

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

在这里，我计算了填充的百分比，在本例中为元素本身宽度的 1%。因此，1% 左右填充（顶部和底部无关紧要），98% 宽度 = 100%。

于 2013-03-27T19:35:07.590 回答
0
  1. 稍微更改您的 HTML 以使其div#SearchButtonContainer出现在div#SearchFieldContainer.
  2. 添加margin-right为div#SearchFieldContainer按钮腾出足够的空间。移除它的float: left;样式，然后它会默认展开 100% 的宽度（右边有一些边距）；
  3. 添加float: right;到div#SearchButtonContainer.

在jsFiddle查看修改后的示例

于 2013-03-27T19:37:19.677 回答