如何以選擇選項的形式顯示錶單作爲horizo​​ntaly列表？

Question

這是可行的CSS顯示一個表單與選擇作爲垂直列表後面的代碼？

<form action=""> 
<select class="selectWidth" name="size" id="size" type="text"> 
<optgroup label="Standard"> 
    <option value="800x600" >800x600</option> 
    <option value="1024x768" >1024x768</option> 
    <option value="1280x960" >1280x960</option> 
    <option value="1280x1024" >1280x1024</option> 
    <option value="1400x1050" >1400x1050</option> 
    <option value="1600x1200" >1600x1200</option> 
    <option value="2560x2048" >2560x2048</option> 
</optgroup> 

<optgroup label="Widescreen"> 
    <option value="1024x600" >1024x600</option> 
    <option value="1280x800" >1280x800</option> 
    <option value="1366x768" >1366x768</option> 
    <option value="1440x900" >1440x900</option> 
    <option value="1600x900" >1600x900</option> 
    <option value="1680x1050" >1680x1050</option> 
    <option value="1920x1080" >1920x1080</option> 
    <option value="1920x1200" >1920x1200</option> 
    <option value="2560x1440" >2560x1440</option> 
    <option value="2560x1600" >2560x1600</option> 
</optgroup> 

<optgroup label="Mobile"> 
    <option value="240x320" >240x320 (ipod)</option> 
    <option value="320x480" >320x480 (iphone)</option> 
    <option value="640x960" >640x960 (iphone4)</option> 
    <option value="640x1136" >640x1136 (iphone5)</option> 
    <option value="1024x1024" >1024x1024 (ipad)</option> 
</optgroup> 
</select> 
</form> 

我想顯示是這樣的：

標準：800×600 1024×768 1280×960 .....

寬屏：1024×600 1280×800 .... 2560×1600

手機：240×320 320x480 640x960 ..... 1024x1024

Answer 1

您可以：

1. 使用javascript將select元素轉換爲標記的嵌套列表;然後

2. 使用CSS顯示嵌套列表爲3所水平列出

這是什麼樣的事情，你的意思是：

var form = document.getElementsByTagName('form')[1]; 
 
var select = form.getElementsByTagName('select')[0]; 
 
var groups = select.getElementsByTagName('optgroup'); 
 

 
var labels = []; 
 
var subLists = []; 
 
var parentListItems = []; 
 
var parentListItemText = []; 
 

 
var parentList = document.createElement('ul'); 
 

 
for (var i = 0; i < groups.length; i++) { 
 
\t \t labels[i] = groups[i].getAttribute('label'); 
 
\t \t parentListItems[i] = document.createElement('li'); 
 
\t \t parentListItemText[i] = document.createTextNode(labels[i] + ': '); 
 
\t \t 
 
\t \t subLists[i] = document.createElement('ul'); 
 

 
\t \t var options = groups[i].getElementsByTagName('option'); 
 

 
\t \t for (var j = 0; j < options.length; j++) { 
 
\t \t \t \t var text = options[j].innerHTML; 
 
\t \t \t \t var subOption = document.createElement('li'); 
 
\t \t \t \t var subOptionText = document.createTextNode(text); 
 
\t \t \t \t subLists[i].appendChild(subOption); 
 
\t \t \t \t subOption.appendChild(subOptionText); 
 
\t \t } 
 

 
\t \t parentList.appendChild(parentListItems[i]); 
 
\t \t parentListItems[i].appendChild(parentListItemText[i]); 
 
\t \t parentListItems[i].appendChild(subLists[i]); 
 
} 
 

 
form.insertBefore(parentList,select); 
 

 
select.style.display = 'none';

h2 { 
 
color: rgba(255, 0, 0 , 1); 
 
} 
 

 
hr { 
 
margin: 48px; 
 
} 
 

 
ul, ul li { 
 
display: block; 
 
} 
 

 
ul, li { 
 
margin-left: 0; 
 
padding-left: 0; 
 
list-style: none; 
 
font-weight: bold; 
 
} 
 

 
li ul, li ul li { 
 
display: inline-block; 
 
padding: 6px; 
 
font-weight: normal; 
 
}

<h2>Before:</h2> 
 
<form action=""> 
 
<select class="selectWidth" name="size" id="size" type="text"> 
 
<optgroup label="Standard"> 
 
    <option value="800x600" >800x600</option> 
 
    <option value="1024x768" >1024x768</option> 
 
    <option value="1280x960" >1280x960</option> 
 
    <option value="1280x1024" >1280x1024</option> 
 
    <option value="1400x1050" >1400x1050</option> 
 
    <option value="1600x1200" >1600x1200</option> 
 
    <option value="2560x2048" >2560x2048</option> 
 
</optgroup> 
 

 
<optgroup label="Widescreen"> 
 
    <option value="1024x600" >1024x600</option> 
 
    <option value="1280x800" >1280x800</option> 
 
    <option value="1366x768" >1366x768</option> 
 
    <option value="1440x900" >1440x900</option> 
 
    <option value="1600x900" >1600x900</option> 
 
    <option value="1680x1050" >1680x1050</option> 
 
    <option value="1920x1080" >1920x1080</option> 
 
    <option value="1920x1200" >1920x1200</option> 
 
    <option value="2560x1440" >2560x1440</option> 
 
    <option value="2560x1600" >2560x1600</option> 
 
</optgroup> 
 

 
<optgroup label="Mobile"> 
 
    <option value="240x320" >240x320 (ipod)</option> 
 
    <option value="320x480" >320x480 (iphone)</option> 
 
    <option value="640x960" >640x960 (iphone4)</option> 
 
    <option value="640x1136" >640x1136 (iphone5)</option> 
 
    <option value="1024x1024" >1024x1024 (ipad)</option> 
 
</optgroup> 
 
</select> 
 
</form> 
 

 
<hr /> 
 

 
<h2>After:</h2> 
 
<form action=""> 
 
<select class="selectWidth" name="size" id="size" type="text"> 
 
<optgroup label="Standard"> 
 
    <option value="800x600" >800x600</option> 
 
    <option value="1024x768" >1024x768</option> 
 
    <option value="1280x960" >1280x960</option> 
 
    <option value="1280x1024" >1280x1024</option> 
 
    <option value="1400x1050" >1400x1050</option> 
 
    <option value="1600x1200" >1600x1200</option> 
 
    <option value="2560x2048" >2560x2048</option> 
 
</optgroup> 
 

 
<optgroup label="Widescreen"> 
 
    <option value="1024x600" >1024x600</option> 
 
    <option value="1280x800" >1280x800</option> 
 
    <option value="1366x768" >1366x768</option> 
 
    <option value="1440x900" >1440x900</option> 
 
    <option value="1600x900" >1600x900</option> 
 
    <option value="1680x1050" >1680x1050</option> 
 
    <option value="1920x1080" >1920x1080</option> 
 
    <option value="1920x1200" >1920x1200</option> 
 
    <option value="2560x1440" >2560x1440</option> 
 
    <option value="2560x1600" >2560x1600</option> 
 
</optgroup> 
 

 
<optgroup label="Mobile"> 
 
    <option value="240x320" >240x320 (ipod)</option> 
 
    <option value="320x480" >320x480 (iphone)</option> 
 
    <option value="640x960" >640x960 (iphone4)</option> 
 
    <option value="640x1136" >640x1136 (iphone5)</option> 
 
    <option value="1024x1024" >1024x1024 (ipad)</option> 
 
</optgroup> 
 
</select> 
 
</form>