Question

我想将选择和输入标签并排放置（在一行中），即使窗口调整为较小的宽度，选择标签也不会破坏到第二行！

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

Total width必须达到100％。 % percentage based width中有90％，margins中有paddings和pixels。您无法准确知道total width的总和是多少。

Read about box-model了解问题。

有几种方法可以解决这个问题：

将margins和paddings更改为% percents，以便该金额为100% max。
将元素更改为box-sizing: border-box;。此外，将它们包装起来以支持边距和高级布局选项。

选中此项以获得更深入的解释和示例： http://css-tricks.com/box-sizing/

Answer 2

您可以使用CSS calc()功能减去固定大小的总和：

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

和

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

检查fiddle

窗口调整大小时并排

2 个答案: