强制选择选项到一行

Question

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我有这个代码，它在StackOverflow上是一行（除了按钮）。但是，在我们的CMS上，每个select元素显示在不同的行上，如下所示：

我可以做些什么来将这些全部强制到一行？

Answer 1

为所有元素添加display：inline-block，使它们显示在一行中：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

对我而言，最佳解决方案也是display: inline-block。

但是，如果您无法访问CMS上的html模板文件，则可以尝试在.css文件中插入以下内容：

#Semester, #Year, #Year + p { display: inline-block;}

如果仍然无效，请尝试在最后!important之前添加;