强制选择选项到一行答案

【问题标题】：Force selection options to one line强制选择选项到一行
【发布时间】：2015-07-21 18:20:42
【问题描述】：

<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 元素显示在不同的行上，如下所示：

我能做些什么来强制将这些都放在一条线上？

【问题讨论】：

尝试添加：#Semester, #year, .submit { display:inline-block;}
如果您提供您的网络链接或为我们创建相同的问题，我们仍然会更容易解决。

标签： html css dotcms

【解决方案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>

【讨论】：

【解决方案2】：

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

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

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

如果还是不行，尝试在最后一个;之前添加!important

【讨论】：