Question

我正在使用python和flask编写在线Monty Hall游戏。我试图并排布置我的三个“门”（选择形式的选项），而不是通常的下拉格式。

我已经尝试通过在css中为它们提供向右浮动和向左浮动的方式来执行此操作，但这不起作用。

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

最后，pickDoor.html页面应如下所示：

[A][B][C]

相反：

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

Answer 1

您只需要将display元素的select设置为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>

Answer 2

您将需要使用具有自定义样式的单选按钮，或者使用自定义HTML元素，CSS和Javascript来实现自己的解决方案...这应该不太困难。

如何使用HTML和CSS并排排列3个选择选项？

2 个答案: