顯示選擇選項作爲選項卡

我有在drupal.I創建選項的選擇框我想在單行中選擇選項。現在oprion列出一個由one.need列出所有選項沒有下拉顯示選擇選項作爲選項卡

#edit-type-1{ 
 
    width:500px; 
 
} 
 
#edit-type-1 option{ 
 
    display:inline; 
 
    width:auto; 
 
}

<select id="edit-type-1" name="type_1" class="form-select"> 
 
<option value="All">- Any -</option> 
 
<option value="blogs" selected="selected">Blogs</option> 
 
<option value="case_studies">Case Studies</option> 
 
<option value="whitepapers">Whitepapers</option> 
 
</select>

來源

2017-06-20 user3386779

您不能選擇選項爲單行，但你可以使其與列表樣式和它與JavaScript的關係。 –

你可以舉例 – user3386779

如果你用不同的HTML代碼替換它，那麼你仍然需要添加腳本功能，以便它仍然可以執行一個選擇字段通常會執行的任務......如果你願意，它可能會更有意義使用單選按鈕從這裏開始，而不是選擇字段。技巧如何隱藏實際的單選按鈕元素，並使用相應的標籤來切換它們（並且如果需要，突出顯示當前「選定」的一個），這些技術是廣泛可用的，並且可以很容易地進行研究。 – CBroe

#edit-type-1{ 
 
    width:500px; 
 
} 
 
#edit-type-1 option{ 
 
    display:inline; 
 
    width:auto; 
 
} 
 
.form-select{ 
 
    display: inline-block; 
 
    height: 3em;  
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
} 
 

 
.form-select option{ 
 
    display: inline-block; 
 
    width: 9em; 
 
    height: 2.5em; 
 
    float:left; 
 
}

<select name="type_1" class="form-select" size="100" > 
 
<option value="All">- Any -</option> 
 
<option value="blogs" selected="selected">Blogs</option> 
 
<option value="case_studies">Case Studies</option> 
 
<option value="whitepapers">Whitepapers</option> 
 
</select>

請同時參閱鏈接 - Select option in single line

來源

2017-06-20 11:56:30 Dexter

中選擇添加尺寸，如下圖所示：

<select class="form-select" size="3"> 
    <option value="All">- Any -</option> 
    <option value="blogs" selected="selected">Blogs</option> 
    <option value="case_studies">Case Studies</option> 
    <option value="whitepapers">Whitepapers</option> 
</select>

添加以下的CSS：

.form-select{ 
    display: inline-block; 
    height: 3em;  
} 

.form-select option{ 
    display: inline-block; 
    width: auto; 
    height: 5px; 
    float:left; 
}

[Demo]

來源

2017-06-20 12:41:59

顯示選擇選項作爲選項卡

回答

相關問題