显示选择选项作为选项卡

Question

我选择了在drupal中创建的选项框。我想在单行中选择选项。现在oprion被逐一列出。需要列出所有选项而不下拉列表

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

Answer 1

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

另请参阅链接 - Select option in single line

Answer 2

在select中添加尺寸，如下所示：

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