how to evenly space out drop down box? - html

Question

I am trying to evenly space out my drop down box. I want the options to be evenly spaced out whenever the user select a drop down box. I tried using margin and this seems to work but for some reason, I can't get it to push down further enough....
<div class="subscriptionplan">
<select name="subscriptionplan">
<option value="">Choose Subscription Plan 1</option>
<option value="None">None</option>
<option value="Level 1">Level 1</option>
<option value="Level 2">Level 2</option>
<option value="Level 3">Level 3</option>
</select>
<br></br>
<select name="pricing_level1">
<option value="">Choose a price plan for Level 1</option>
<option value="None">None</option>
<option value="100">Monthly:$100</option>
<option value="800">Yearly:$800</option>
</select>
<br></br>
<select name="pricing_level2">
<option value="">Choose a price plan for Level 2</option>
<option value="None">None</option>
<option value="150">Monthly:$150</option>
<option value="1300">Yearly:$1300</option>
</select>
<br></br>
<select name="pricing_level3">
<option value="">Choose a price plan for Level 3</option>
<option value="None">None</option>
<option value="200">Monthly:$200</option>
<option value="1800">Yearly:$1800</option>
</select>
<br></br>
<button type="submit" name="submit">Sign up</button>
</form>
</div>
This is the CSS code:
div.subscriptionplan {
position: absolute;
right: 180em;
bottom: 60em;
}
div.subscriptionplan select{
margin: 180em;
}

Answer 1

em is not equal to px.
div.subscriptionplan {
position: absolute;
right: 180em;
bottom: 60em;
}
div.subscriptionplan select{
margin: 180em;
}
/* ------------------------*/
You did not add the context for absolute position.
assuming that you need css for spacing select boxes side by side please refer below. you can remove br tags.
div.subscriptionplan {
/* position: absolute;
right: 180em;
bottom: 60em;*/
display:block;
width:100%;
}
div.subscriptionplan select{
/* margin: 180em;*/
margin:0.5em;
display:inline-block;
max-width:33.3%;
}