水平对齐选择中的选项? [英] Horizontally align options in select?

问题描述

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

这就是我目前的风格:

*:focus {大纲:无；}选择 {外观:无；-webkit 外观:无；背景色:透明；边框:0；填充:10px；边距:-5px -20px -5px -5px;}#饮料持有人{显示:内联块；垂直对齐:顶部；溢出:隐藏；}

<选择尺寸=6"><选择的选项>水</选项><option>苹果汁</option><option>橙汁</option><option>牛奶</option><option>咖啡</option><option>运动饮料</option></选择>

我的应用程序中确实有 jQuery，但我更喜欢仅使用 css 选项，交叉兼容性也不是问题，感觉这个项目将被打包到 webkit 中.

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

水苹果汁橙汁...

谢谢！

对于交叉可比性部分感到困惑的人，我的意思是这将被打包在 webkit 中以制作一个 iOS 应用程序

解决方案

您只需将 display:inline-block; 与 select 选项一起使用:

#drink-holder 选择选项 {显示:内联块；}

演示:

*:focus {大纲:无；}选择 {外观:无；-webkit 外观:无；背景色:透明；边框:0；填充:10px；边距:-5px -20px -5px -5px;}#drink-holder 选择选项 {显示:内联块；}#饮料持有人{显示:内联块；垂直对齐:顶部；溢出:隐藏；}

<选择尺寸=6"><选择的选项>水</选项><option>苹果汁</option><option>橙汁</option><option>牛奶</option><option>咖啡</option><option>运动饮料</option></选择>

I am working on styling an option tag for a project I am working on but I am unable to figure out if it is even possible to horizontally align the option tags in my select box.

This is what I currently have style wise:

*: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>

I do have jQuery in my app but I would prefer a css only option also cross compatibility is not a problem sense this project will be packaged in webkit.

If you do not understand what I want it is simply like this:

Water Apple Juice Orange Juice ...

Thanks!

Edit: For people confused on the cross-comparability part I meant that this would be packaged in webkit to make an iOS app

解决方案

You simply need to use display:inline-block; with the select options:

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

Demo:

*: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>

这篇关于水平对齐选择中的选项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！