带按钮的响应式全宽输入 [英] Responsive full width input with button

问题描述

我这里有小提琴:https://jsfiddle.net/ufLpqdtj/

我的问题是试图让我的搜索框和按钮始终位于页面上的全宽，而不管它在什么设备上运行.

在 Javascript 中，我总是可以将文本框的宽度设置为 100% 减去按钮的像素宽度(按钮的大小始终相同)，但我觉得好像我遗漏了一些东西，而且它可以在 CSS 中本地完成.

有什么想法或建议吗?

#commonSearchContainer {显示:块；清楚:两者；宽度:100%；位置:相对；}#commonSearchTerm {宽度:100%；边距:25px 0px 0px 0px；填充:5px；边框:1px 实心 #999999;高度:35px；-webkit-box-sizing: 边框框；-moz-box-sizing: 边框框；box-sizing: 边框框；}.common-search-term-wrapper {宽度:90%；显示:内联块；-webkit-box-sizing: 边框框；-moz-box-sizing: 边框框；box-sizing: 边框框；}.common-search-button {背景颜色:#E9700D；边框:1px 实心 #ccc；显示:内联块；边距:25px 0px 0px 10px；宽度:80px；颜色:#fff;填充:7px；字体样式:斜体；光标:指针；}

<div class="common-search-term-wrapper"><input id="commonSearchTerm" type="text" autocomplete="off" class="common-search-term">
<div id="commonSearchSubmit" class="common-search-button">搜索<div style="clear: both;"></div>

解决方案

我通常为这种布局做的是在元素周围创建一个父容器(就像你一样)并给它position:relative 和 width: 100%.

然后我在内部元素上使用 position: absolute 和 display: inline-block .设置固定大小元素的宽度并使用 left 或 right 来定位所有元素.

在你的情况下，它会是这样的:https://jsfiddle.net/ufLpqdtj/1/

I have the fiddle here: https://jsfiddle.net/ufLpqdtj/

My problem is trying to get my search box and button to always sit full width on the page regardless of the device it is running on.

In Javascript I could always make the text box width 100% minus the pixel width of the button (the button is always the same size) but I feel as if im missing something and that it can be done natively in CSS.

Any thoughts or suggestions?

#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>

解决方案

What I typically do for that sort of layout is make a parent container around the elements (like you have) and give it position: relative and width: 100%.

Then I use position: absolute and display: inline-block on the inner elements. Set the width for the fixed-sized elements and use left or right to position all of the elements.

In your case, it would be something like this: https://jsfiddle.net/ufLpqdtj/1/

这篇关于带按钮的响应式全宽输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！