选择多个

Question

我想更改select多个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