我这里有 fiddle :https://jsfiddle.net/ufLpqdtj/
我的问题是试图让我的搜索框和按钮在页面上始终保持全宽,而不管它在什么设备上运行。
在 Javascript 中,我总是可以使文本框的宽度为 100% 减去按钮的像素宽度(按钮的大小始终相同),但我觉得我好像遗漏了什么,而且它可以在 CSS 中本地完成。
有什么想法或建议吗?
#commonSearchContainer {
display: block;
clear: both;
width: 100%;
position: relative;
}
#commonSearchTerm {
width: 100%;
margin: 25px 0px 0px 0px;
padding: 5px;
border: 1px solid #999999;
height: 35px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.common-search-term-wrapper {
width: 90%;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.common-search-button {
background-color: #E9700D;
border: 1px solid #ccc;
display: inline-block;
margin: 25px 0px 0px 10px;
width: 80px;
color: #fff;
padding: 7px;
font-style: italic;
cursor: pointer;
}
<div id="searchSection" class="common-search-section">
<div class="common-search-term-wrapper">
<input id="commonSearchTerm" type="text" autocomplete="off" class="common-search-term">
</div>
<div id="commonSearchSubmit" class="common-search-button">
Search
<div style="clear: both;"></div>
</div>
</div>
最佳答案
对于这种布局,我通常做的是在元素周围创建一个父容器(就像你有的那样)并给它 position: relative
和 width: 100%
.
然后我在内部元素上使用 position: absolute
和 display: inline-block
。设置固定大小元素的宽度,并使用 left
或 right
定位所有元素。
在您的情况下,它将是这样的:https://jsfiddle.net/ufLpqdtj/1/
关于html - 带按钮的响应式全宽输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40208829/