gpt4 book ai didi

html - 水平对齐选择中的选项?

转载 作者:行者123 更新时间:2023-12-02 03:51:18 25 4
gpt4 key购买 nike

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

这就是我目前的风格:

*: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 应用程序

最佳答案

您只需将 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>

关于html - 水平对齐选择中的选项?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45327723/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com