select多选下拉框默认不能按行排列，因其为原生控件，浏览器限制布局，css无法控制option换行或横向排列；推荐用checkbox替代实现真·按行排列，兼容性好且语义清晰。
为什么 select 多选下拉框默认不能按行排列
因为 select 是原生表单控件，浏览器对其布局有严格限制，display: flex 或 flex-direction: column 对它无效，CSS 无法直接控制其内部 option 的换行或横向排列。强行用 width + white-space 等属性也基本没用——option 不响应这些样式。
用 checkbox 替代 select[multiple] 实现真·按行排列
这是最可靠、兼容性最好、语义也清晰的做法：把多选逻辑从下拉切换为显式勾选，再用 CSS 控制排列方式。
- 每个选项用
<label><input type="checkbox" name="xxx" value="val"> 文本</label>包裹，保证点击文本也能触发选择 - 用
display: flex或display: grid控制父容器布局，例如：div.checkbox-group { display: flex; flex-wrap: wrap; gap: 8px; } - 每个
label设为display: flex; align-items: center; gap: 4px;，避免文字和框错位 - 若需限制每行数量（如每行 3 个），用
grid-template-columns: repeat(3, minmax(120px, 1fr))
select[multiple] 强行“模拟”横向滚动的注意事项
极少数场景必须保留 select 标签（如后端框架强依赖 name + multiple 提交格式），可考虑横向滚动+固定高度，但不是“按行排列”，而是让用户左右滑动查看：
- 给
select设height: 40px和white-space: nowrap - 给内部
option设display: inline-block; margin-right: 12px;—— 但注意：Chrome / Edge 近年已禁止对option设置大部分样式，此法在 Safari 也不稳定 - 实际更稳妥的是用 JS 动态生成
span模拟option，再绑定change事件同步隐藏的select值，但复杂度陡增
移动端适配时 checkbox 组最容易被忽略的点
横向排列在小屏上极易溢出或挤压变形，尤其当选项文字长度不一：
- 避免写死
width，优先用min-width: max-content或flex: 1 1 auto让项自适应 - 加
word-break: break-word防止长英文/数字撑破容器 - 触摸目标至少保证
min-height: 44px（iOS 最小推荐点击区域），别让label太窄 - 不要依赖
:hover做交互反馈，改用:active或 JS 添加临时 class
select 标签，就直接上 checkbox + flex/grid。那些试图用 CSS “撬动” select 内部布局的方案，90% 在某个浏览器版本里会突然失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
