2015-09-26 49 views
1

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

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

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

回答

0

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

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

希望这有助于!

+0

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

+0

很高兴我帮助:) – Toastrackenigma

0

如果你想<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>

0

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