Html 选择中的水平对齐选项？

我正在为正在处理的项目设置选项标记的样式，但我无法确定是否可以水平对齐选择框中的选项标记

这就是我目前的风格：

*：焦点{
大纲：无；
}
挑选{
外观：无；
-webkit外观：无；
背景色：透明；
边界：0；
填充：10px；
保证金：-5px-20px-5px-5px；
}
#酒杯架{
显示：内联块；
垂直对齐：顶部；
溢出：隐藏；
}

水
苹果汁
橙汁
牛奶
咖啡
运动饮料

您只需使用

显示：内联块使用
选择
选项：

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

演示：


*：焦点{
大纲：无；
}
挑选{
外观：无；
-webkit外观：无；
背景色：透明；
边界：0；
填充：10px；
保证金：-5px-20px-5px-5px；
}
#饮料架选择选项{
显示：内联块；
}
#酒杯架{
显示：内联块；
垂直对齐：顶部；
溢出：隐藏；
}

水
苹果汁
橙汁
牛奶
咖啡
运动饮料
在safari上的结果看起来是一样的。我还没有在safari上测试过，因为它在Chrome和FF中工作，但我想你说过交叉兼容性不是问题？！我只需要它在safari sense上运行，这将打包在webkit iOS应用程序中，但您可以尝试使用`显示：内联块！重要的@arodebaugh请尝试在浏览器中调试以下代码，并查看哪些css规则被忽略？