Force selection options to one line

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:

enter image description here

What can I do to force these all on to one line?

Try adding this: #Semester, #year, .submit { display:inline-block;} — divy3993, Jul 21 '15 at 18:23
Still it would be more easy for us to solve if you provide your web link or create same issue for us. — divy3993, Jul 21 '15 at 18:23

score 1 · Accepted Answer · answered Jul 21 '15 at 18:24

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>

score 1 · Answer 2 · answered Jul 21 '15 at 18:31

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 ;

Force selection options to one line

2 Answers2