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

问题描述：

我正在尝试创建一个简单的页面，其中一个侧栏上有一组下拉框，它们相互叠放在页面左侧。一个模糊的例子如下：将选择标签/选项标签堆叠在彼此之上

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>

你有没有尝试过用CSS？如果是这样，编辑问题也包括CSS。 – Xufox

答

有你能解决这个问题的一些方法 - 你可以把你挑：

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：带显示：块

使用CSS，你可以告诉它显示它自己的线作为块级元素元素：

side-bar select { 
    display:block; 
}

希望这有助于！

谢谢！我选择了3，像魅力一样工作。 – Howitworks2117

很高兴我帮助:) – Toastrackenigma

答

如果你想<select>元素堆栈可以使用display: block。您只需添加一行CSS，并且不需要HTML中的额外标记。

CSS

select { 
 
    display: block; 
 
}

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

答

我会建议只是将每个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>

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

相关推荐