选择多个的内联样式答案

【问题标题】：Inlining style for Select multiple选择多个的内联样式
【发布时间】：2018-06-29 01:57:28
【问题描述】：

我想更改选择多个 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是select，框2是我需要的结果。

【问题讨论】：

标签： html css select styles

【解决方案1】：

在您的选择中添加空格：正常

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

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

【讨论】：