我在这里搜索并找到了很多问题和答案,但我就是无法让它工作。
您可以在这里查看我的 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;
}
我想要的是输入字段将占据它所有的空间,搜索按钮将位于它旁边,在同一行。
我尝试了很多东西,比如 overflow hidden 和其他,但它拒绝工作:-/
这里有什么帮助吗?
谢谢, - 夏
最佳答案
- 稍微更改您的 HTML,让
div#SearchButtonContainer
出现在div#SearchFieldContainer
之前。 - 将
margin-right
添加到div#SearchFieldContainer
中,为按钮留出足够的空间。去掉它的float: left;
样式,那么它会默认展开 100% 宽度(右边有一些边距); - 将
float: right;
添加到div#SearchButtonContainer
。
在 jsFiddle 查看修改后的示例
关于css - 2 个 div,并排占用 100% 的空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15667647/