select 中的水平对齐选项？

Question

我正在为我正在处理的项目设计选项标签的样式，但我无法弄清楚是否可以水平对齐 select 框中的选项标签。

这是我目前的风格：

*:focus {
    outline: none;
}

select {
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  border: 0;
  padding:10px;
  margin:-5px -20px -5px -5px;
}

#drink-holder {
  display:inline-block;
  vertical-align:top;
  overflow:hidden;
}

<div id="drink-holder">
  <select size="6">
      <option selected>Water</option>
      <option>Apple Juice</option>
      <option>Orange Juice</option>
      <option>Milk</option>
      <option>Coffee</option>
      <option>Sports Drink</option>
  </select>
</div>

我的应用程序中确实有 jQuery，但我更喜欢 css 唯一选项，而且交叉兼容性不是问题，因为这个项目将打包在 webkit 中。

如果你不明白我想要的是什么，它就是这样：

水苹果汁橙汁...

谢谢！

编辑：对于那些对交叉比较部分感到困惑的人，我的意思是将其打包在 webkit 中以制作 iOS 应用程序

Answer 1

您只需使用 display:inline-block; 和 select 选项：

#drink-holder select option {
  display:inline-block;
}

演示：

*:focus {
    outline: none;
}

select {
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  border: 0;
  padding:10px;
  margin:-5px -20px -5px -5px;
}

#drink-holder select option {
  display:inline-block;
}

#drink-holder {
  display:inline-block;
  vertical-align:top;
  overflow:hidden;
}

<div id="drink-holder">
  <select size="6">
      <option selected>Water</option>
      <option>Apple Juice</option>
      <option>Orange Juice</option>
      <option>Milk</option>
      <option>Coffee</option>
      <option>Sports Drink</option>
  </select>
</div>

select 中的水平对齐选项？

Horizontally align options in select?

html

css

html-select

drop-down-menu