html - 如何使用 html 和 css 并排排列 3 个选择选项？

Question

我正在使用 Python 和 Flask 编写在线 Monty Hall 游戏。我正在尝试并排排列我的三个“门”(选择表单中的选项)，而不是通常的下拉格式。

我已经尝试通过在 css 中给他们 float right 和 float left 来做到这一点，但是这是行不通的。

我所有的代码都在 this repl.it 中.

最后 pickDoor.html 页面应该如下所示:

[A][B][C]

反对:

[choose a door]
[A]
[B]
[C]

Answer 1

你只需要将select元素的display设置为inline-block即可:

form
{
    text-align: center;
}
select
{
    display: inline-block;
}

<form>
    <select>
        <option selected disabled>Select 1</option>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
    <select>
        <option selected disabled>Select 2</option>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
    <select>
        <option selected disabled>Select 3</option>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
</form>