强制选择选项为一行

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>

我有这段代码，它在 Whosebug 上位于一行（按钮除外）。然而，在我们的 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

强制选择选项为一行

Force selection options to one line

html

css

dotcms