“选择多个”的内联样式

Question

我想更改选择多个 html 标签的默认样式。我需要应用内联块样式并为选项居中对齐，但是当我应用此样式时，选项不会中断到新行。

<select name="select" id="select" multiple size="3">
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
  <option value="4">option 4</option>
  <option value="5">option 5</option>
  <option value="6">option 6</option>
<select/>

select {
  width: 200px;
  height: 200px;
  text-align: center;
  background: yellow;
  display: block;
}

option {
  width: 50px;
  margin: 5px;
  padding: 10px 5px;
  border: 1px solid #000;
  border-radius: 5px;
  display: inline-block;
}

这是代码：https://codepen.io/gpuente/pen/NXeoRN

框

1 是选择，框 2 是我需要的结果。

Answer 1

在选择中添加空格：正常

select {
  width: 200px;
  height: 200px;
  text-align: center;
  background: yellow;
  display: block;
  white-space: normal;
}

https://codepen.io/RACCH/pen/ypGwNq