将 select 和 Input 和 Button HTML 元素对齐在一行中答案

【问题标题】：Align the select and Input and Button HTML elements in one row将 select 和 Input 和 Button HTML 元素对齐在一行中
【发布时间】：2016-11-20 05:32:41
【问题描述】：

有人可以帮我将 Select Drop down、Input 和 Submit 按钮排成一行。

我只得到输入和按钮在行中对齐，但选择是向上的。

我在下面的 CSS 中尝试过，但没有用

display : inline;

能否请您帮忙修改 CSS 以对齐所有在一行中。

Demo

【问题讨论】：

标签： html css alignment

【解决方案1】：

你的例子无处不在。此外，“选择器”应该拼写为“选择器”，但这不是重点。使用更多<div> 元素来环绕更小的代码段。例如：

    <div>
        <div class="item"><p>Hello</p></div>
        <div class="item"><p>Stack</p></div>
        <div class="item"><p>Overflow!</p></div>
    </div>

通常，这些<div> 会显示在另一个下方。但是，如果我们添加与您正在使用的样式规则相似的样式规则，我们将在一行中获得这三个元素的结果。

.item {
    display: inline-block;
}

将您的按钮元素包装在<div> 容器中，并使用上述设置样式。这能回答你的问题吗？

【讨论】：

【解决方案2】：

我找到了解决办法，我只需要制作

inline-flex =>inline-flex 使容器内联，同时仍保留 flex 布局属性。

display : inline-flex;

【讨论】：