实际问题是在select block 中横向使用option标签，用optgroup划分option值。
所以预期的结果是:
显示第 10 页上的元素 | 20 | 30，其中 10、20、30 是可选的，表格将显示选定的元素数量
我得出的解决方案是:
HTML:
<div class="styled-select">
<select size="3">
<optgroup label="|">
<option value="10">10</option>
</optgroup>
<optgroup label="|">
<option value="20">20</option>
</optgroup>
<optgroup label="|">
<option value="30">30</option>
</optgroup>
</select>
</div>
CSS:
.styled-select {
display:inline-block;
overflow:hidden;
margin-top:30px;
overflow-x:hidden;
height:25px;
}
.styled-select select {
margin: -1px -20px -5px -5px;
}
optgroup {
position:relative;
display:inline-block;
width:32px;
padding-left:5px;
padding-right: 0px;
}
optgroup:nth-child(1) {
visibility:hidden;
}
.styled-select select option{
visibility:visible;
position:absolute;
display:inline-block;
width:15px;
margin-left:12px !important;
padding-top:-10px !important;
margin-top:-16px !important;
text-align: center;
}
.styled-select select option::before{
content: none;
padding-left: 0 !important;
padding-right: 0 !important;
margin: 0 0 0 0;
}
您可以在这里看到结果:https://jsfiddle.net/834gwtz7/4/
如果您有任何建议，如何以更优雅的方式做到这一点，请提供帮助!
最佳答案
不确定我是否遵循了您想做的事情，但也许像这样更简单的方法也能起到同样的作用？
<!DOCTYPE html>
<html>
<body>
<style>
#styled-select select optgroup {
display:inline-block;
}
</style>
<div id="styled-select">
<select size="3">
<optgroup label="option1">
<option value="10">10</option>
<option value="10">10</option>
</optgroup>
<optgroup label="option2">
<option value="20">20</option>
<option value="10">10</option>
</optgroup>
<optgroup label="option3">
<option value="30">30</option>
<option value="10">10</option>
</optgroup>
</select>
</div>
</body>
</html>
关于html - 如何在选择中内联选项标签并使用 optgroup 划分它们？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54439733/