Question

我正在尝试创建一个带有侧栏的简单页面，其中一组下拉框堆叠在我的页面左侧。一个模糊的例子如下：

HEADER---------------------------------->
[drop down box1]

[drop down box1]       BODY

[drop down box1]

[drop down box1]

我已经获得了正文和标题以及侧栏/标题/正文集的参数。我只需要弄清楚如何堆叠这些下拉框。

<div class="side-bar">
  <select class="option-one">
    <option>test</option>
    <option>test</option>
    <option>test</option>
  </select>

  <select class="option-two">
    <option>test</option>
    <option>test</option>
    <option>test</option>
  </select>

  <select class="option-three">
    <option>test</option>
    <option>test</option>
    <option>test</option>
  </select>

  <select class="option-four">
    <option>test</option>
    <option>test</option>
    <option>test</option>
  </select>
</div>

Answer 1

如果您希望堆叠display: block个元素，可以使用select { display: block; }。您只需添加一行CSS，就不需要在HTML中添加额外的标记。

<强> CSS

＆＃13;

<div class="side-bar">
  <select class="option-one">
    <option>test</option>
    <option>test</option>
    <option>test</option>
  </select>

  <select class="option-two">
    <option>test</option>
    <option>test</option>
    <option>test</option>
  </select>

  <select class="option-three">
    <option>test</option>
    <option>test</option>
    <option>test</option>
  </select>

  <select class="option-four">
    <option>test</option>
    <option>test</option>
    <option>test</option>
  </select>
</div>

＆＃13;

app.get('/', controller);

＆＃13;

Answer 2

我建议只将每个select语句放在div中。 Div是通用块级元素，因此div将自动堆叠在一起。您还可以在div中放置其他内容，例如标签等，堆叠仍然有效。

<div class="side-bar">
  <div><select class="option-one">
    <option>test</option>
    <option>test</option>
    <option>test</option>
  </select></div>

  <div><select class="option-two">
    <option>test</option>
    <option>test</option>
    <option>test</option>
  </select></div>

  <div><select class="option-three">
    <option>test</option>
    <option>test</option>
    <option>test</option>
  </select></div>

  <div><select class="option-four">
    <option>test</option>
    <option>test</option>
    <option>test</option>
  </select></div>
</div>

Answer 3

有几种方法可以解决这个问题 - 您可以选择：

1：使用无序列表

<div class="side-bar">
 <ul class="select-elements">
  <li>
  <select>
    <option>test</option>
    <option>test</option>
    <option>test</option>
  </select>
  </li>

  <li>
  <select>
    <option>test</option>
    <option>test</option>
    <option>test</option>
  </select>
  </li>

  <li>
  <select>
    <option>test</option>
    <option>test</option>
    <option>test</option>
  </select>
  </li>

  <li>
  <select>
    <option>test</option>
    <option>test</option>
    <option>test</option>
  </select>
  </li>
 </ul>
</div>

这会将每个选择组放在一个新行上，并在它们旁边放置一个子弹点。要删除项目符号，请添加此CSS：

select-elements li {
    list-style-type:none;
}

2：有换行符

未封闭的<br>标记将替换为HTML中的换行符。使用<br>代码，您的侧边栏代码如下所示：

<div class="side-bar">
      <select>
        <option>test</option>
        <option>test</option>
        <option>test</option>
      </select><br>

      <select>
        <option>test</option>
        <option>test</option>
        <option>test</option>
      </select><br>

      <select>
        <option>test</option>
        <option>test</option>
        <option>test</option>
      </select><br>

      <select>
        <option>test</option>
        <option>test</option>
        <option>test</option>
      </select><br>
</div>

3：使用display：block

使用CSS，您可以告诉一个元素它作为块级元素显示在它自己的行上：

side-bar select {
    display:block;
}

希望这有帮助！

将选择/选项标签堆叠在彼此之上

3 个答案: