Force selection options to one line - html

Question

<select id="Semester">
<option value="Fall">Fall</option>
<option value="Spring">Spring</option>
<option value="Summer">Summer</option>
</select>
<select id="Year">
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
</select>
<p>
<input class="submit" value="Submit" type="submit" />
</p>
I have this code, which, on StackOverflow is on one line (except for the button). On our CMS, however, each select element shows up on a different line like this:
What can I do to force these all on to one line?

Answer 1

Add display: inline-block to all your elements to make them display in one line:
<select id="Semester" style="display: inline-block;">
<option value="Fall">Fall</option>
<option value="Spring">Spring</option>
<option value="Summer">Summer</option>
</select>
<select id="Year" style="display: inline-block;">
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
</select>
<p style="display: inline-block;">
<input class="submit" value="Submit" type="submit" />
</p>

Answer 2

To me, the best solution is also display: inline-block.
However, if you don't have access to the html template files on your CMS, you can try to insert the following on your .css file:
#Semester, #Year, #Year + p { display: inline-block;}
If it still doesn't work, try adding !important just before the last ;