javascript - 对齐选择、输入、提交在同一行而不倒下

Question

在我的网站中，我有一个搜索框、选择框和一个按钮排列在同一行，我已经固定了一个宽度来选择某个像素的选项，我也将文本字段的宽度指定为 80%，并且重新挖掘给提交按钮的空间，但问题是每当选择选项中出现大文本时，文本字段就会下降，我需要它必须根据选择框的大小自动排列文本字段的宽度，我正在摆弄我的代码here

<div class="my-search">
    <select>
        <option>All</option>
        <option>All</option>
        <option>All</option>
    </select>
    <input type="text" class="seacrh-input" />
    <input type="button" value="oke" class="input-btn" />
</div>

CSS

.my-search {
    width:250px;
    background:red;
}
select, input {
    float:left;
}
input[type="text"] {
    width:60%;
}

这个 fiddle 工作正常，但是对于同样的事情，我更改了选择选项的值，然后选择框大小增加并且布局失败，有什么方法可以正确显示它？

检查第二个 fiddle ，它有问题 here

我需要一个像 www.amazon.in 这样的搜索框

Answer 1

你想要这样的东西吗？

.my-search {
    width:250px;
    background:red;
    display: inline;
}
select, input {
    display: inline-block;
}
input[type="text"] {
    display: inline-block;
    float: none;
}

https://jsfiddle.net/25kvqzf8/3/