我想并排放置选择和输入标签(在一行中),即使窗口调整到更小的宽度,选择标签也不会中断到第二行!
HTML
<div>
<input type="text" id="company" />
<select>
<option>test 1</option>
<option>test 2</option>
</select>
</div>
CSS
input {
width: 10%;
float:right;
margin-right:4px;
padding: 6px 12px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
select {
width: 80%;
float:right;
padding: 6px 12px;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
最佳答案
您可以使用 CSS calc()
函数减去固定框大小的总和:
input {
width: calc(10% - 17px);
...
和
select {
width: calc(80% - 13px);
...
检查 fiddle
关于html - 调整窗口大小时并排,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25832398/