將選擇標籤/選項標籤堆疊在彼此之上

我正在嘗試創建一個簡單的頁面，其中一個側欄上有一組下拉框，它們相互疊放在頁面左側。一個模糊的例子如下：將選擇標籤/選項標籤堆疊在彼此之上

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>

來源

2015-09-26 Howitworks2117

你有沒有嘗試過用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; 
}

希望這有助於！

來源

2015-09-26 03:36:24 Toastrackenigma

謝謝！我選擇了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>

來源

2015-09-26 02:34:13 zer00ne

我會建議只是將每個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>

來源

2015-09-26 02:44:00 kojow7

將選擇標籤/選項標籤堆疊在彼此之上

回答

相關問題