动态更改宽度以使用CSS

Question

我正在尝试使用输入文本和其中的两个按钮创建一个自定义div，如下所示。

但是当我调整屏幕大小时，就会变成这样

有没有办法避免两个按钮下降？相反，它应该保留在原始div中。

这是我试过的代码：

.searchBar {
	background: #DDDDDD;
	width:100%;
	height:50px;
	padding: 10px;
	position: relative;
}

.search_field {
	display: inline-block;
	border-radius:4px ;
	background: #FFFFFF;
	width: 70%;height: 32px;
	position: relative;
	left: 60px;
	overflow: inherit;
}

.search_field input {
	width: 89%;
	padding: 0;
	border-top-left-radius: 4px;
	padding-left: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	border:1px inset red;
}

.search_field input:focus {
	outline-color: transparent;
	outline-style: none;
}

.search_field button {
	border: none;
	background: none;
}

<div id="searchBar" class="searchBar">
	<div class="search_field">                
		<input type="text" id="searchInput" placeholder="Search" oninput="showSearchButtons()"/>
		<button id="btn1"  hidden="true" onclick="alert()"><img src="assets/images/search.png"></button>                    
		<button id="btn2" hidden="true" onclick="alert()"><img src="assets/images/saveBtn.png"></button>
	</div>
</div>

感谢任何帮助。感谢

Answer 1

您可以使用calc计算输入元素相对于按钮的宽度：

width: calc(100% - 100px);

确保按钮的宽度取自100%。在SASS中，它看起来像这样：

$buttons: 50px;
width: calc(100% - #{$buttons * 2});

以下是简化的实现。我仍然将%值作为旧版浏览器的后备 - 但这是一种习惯，而不是必需品，因为每个主流浏览器都支持计算，甚至是IE9及其后续版本。

＆＃13;

＆＃13;

input, button {
    float: left;
    height: 50px;
    display: block;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
}
input {
    width: 70%;
    width: calc(100% - 100px);
    padding: 10px;
}
button {
    /* Note that this width is equal to 100% 
    /* minus the percentage width of the input 
    /* divided by the amount of buttons. */
    width: 15%; 
    width: 50px;
    line-height: 50px;
}
/* This rule is just to make sure your images don't decide the buttons width */
button img {
    max-width: 100%;
    display: inline-block;
}

＆＃13;

<input type='text' placeholder='search' />
<button><img src="http://placehold.it/50x50" /></button>
<button><img src="http://placehold.it/50x50" /></button>

＆＃13;

＆＃13;

＆＃13;

Answer 2

Please try this instead of your styles:

.searchBar{
	background: #DDDDDD;
	width:100%;
	height:50px;
	padding: 10px;
	position: relative;
}
.search_field {
	border-radius:4px ;
	background: #FFFFFF;
	position: relative;
	padding-right: 100px; /* You can change as button width */
}
.search_field input {
	width: 100%;
	padding: 0;
	padding-left: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	border: solid 1px #FF0000;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	 -moz-box-sizing: border-box;    /* Firefox, other Gecko */
				box-sizing: border-box;
}
.search_field button {
	border: none;
	background: none;
	position: absolute;
	top: 0;
}
.search_field button#btn1 {
	right: 50px; /* Change as your requirement */
}
.search_field button#btn2 {
	right: 0; /* Change as your requirement */
}