html - 调整窗口大小时并排

Question

我想并排放置选择和输入标签(在一行中)，即使窗口调整到更小的宽度，选择标签也不会中断到第二行!

看看my jsfiddle

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;
}

Answer 1

您可以使用 CSS calc()函数减去固定框大小的总和:

input {
    width: calc(10% - 17px);  
    ...  

和

select {
    width: calc(80% - 13px);
    ...

检查 fiddle