选择中的水平对齐选项? [英] Horizontally align options in select?
问题描述
我正在为正在处理的项目设计选项标签的样式,但是我无法弄清是否有可能在选择框中水平对齐选项标签.
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>
我的应用程序中确实有jQuery,但我更希望使用css only选项,而且交叉兼容性不是问题,因为该项目将打包在webkit中.
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:
水苹果汁橙汁...
谢谢!
对于那些对交叉可比性感到困惑的人,我的意思是将其打包在webkit中以制作iOS应用
For people confused on the cross-comparability part I meant that this would be packaged in webkit to make an iOS app
推荐答案
您只需要将display:inline-block;
与select
选项一起使用:
You simply need to use display:inline-block;
with the select
options:
#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>
这篇关于选择中的水平对齐选项?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!