How to arrange 3 select options side by side using html and css?

Question

I'm writing an online Monty Hall game using python and flask. I'm trying to arrange my three 'doors' (options in a select form) side by side, opposed to the usual drop-down format.

I have already tried doing this by giving them the float right and float left in css, however this is not working.

All of my code is in this repl.it.

In the end the pickDoor.html page should look like:

[A][B][C]

Opposed to:

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

Please make sure you are posting [Minimal, Complete and Verifiable Examples](https://stackoverflow.com/help/mcve) — , Jan 18 '19 at 00:45
Possible duplicate of: [Making Radio Buttons Look Like Buttons](https://stackoverflow.com/questions/16242980/making-radio-buttons-look-like-buttons-instead) — , Jan 18 '19 at 02:03

score 1 · Answer 1 · 2019-01-18T00:53:42.833

1

You just need to set display of the select element to 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>

edited Jan 18 '19 at 00:53

answered Jan 18 '19 at 00:41

That's not the goal. The goal is one select in which the options are side by side. – Joe Perna Jan 18 '19 at 01:52
@JoePerna Ah ok, can you explain exactly how you envision this? Do they have to collapse into one select or are you just envisioning three buttons in a row? – Jan 18 '19 at 01:54
Three buttons in a row, however only one may ever be selected at a single time. – Joe Perna Jan 18 '19 at 01:55
@JoePerna You would need to either use `radio` buttons or implement your own solution with custom HTML elements, CSS and Javascript... It shouldn't be too difficult. Hope that helps : ) – Jan 18 '19 at 01:58
@JoePerna [Making Radio Buttons Look Like Buttons](https://stackoverflow.com/questions/16242980/making-radio-buttons-look-like-buttons-instead) – Jan 18 '19 at 02:00
1

Ok. I will try that. Thank you for the advise. – Joe Perna Jan 18 '19 at 02:02

score 0 · Accepted Answer · answered Jan 18 '19 at 02:03

0

You would need to either use radio buttons with custom styling or implement your own solution with custom HTML elements, CSS and Javascript... It shouldn't be too difficult.

answered Jan 18 '19 at 02:03

How to arrange 3 select options side by side using html and css?

2 Answers2