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>

我有这段代码，它在 StackOverflow 上位于一行（按钮除外）。然而，在我们的 CMS 上，每个select元素都显示在不同的行上，如下所示：

我该怎么做才能将这些全部放在一条线上？

Answer 1

将 display: inline-block 添加到所有元素以使它们显示在一行中：

<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

对我来说，最好的解决方案也是display: inline-block.

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

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

如果它仍然不起作用，请尝试!important在最后一个之前添加;