我正在使用select标记在html中创建一个下拉列表。我无法增加“选择”列表中选项之间的间距。下面是我的代码。如何增加选项之间的差距？
<style type="text/css">
#height {
width: 200px;
}
#height option {
width: 500px;
height:200px !important;
}
</style>
<select id="height">
<option value="bugatti">Bugatti</option>
<option value="lamborghini">Lamborghini</option>
<option value="ferrari">Ferrari</option>
<option value="levis">Levis</option>
<option value="reebok">Reebok</option>
<option value="nike">Nike</option>
</select>
4条答案
按热度按时间3hvapo4f1#
选项标记的呈现由浏览器决定，它们有自己独特的方式，因此选项标记的填充甚至边距等限制在浏览器中起作用
mozilla firefox虽然它不适用于chrome.小结：如果非常有必要更改外观，可以使用自定义js插件。
neskvpey2#
这是不可能的。如果你真的需要这个，你应该创建一个自定义选项菜单。
没有填充、边距、高度或线条高度用于选项。可以在元素之间使用空选项，但这不是一个好的解决方案。
hgtggwj03#
我发现了一个解决方法：只增加一个元素的字体大小（我选择了第一个元素，我总是将其保留为空白）。我是用javascript编程实现的：
这将强制所有选项以相同（放大）的空间显示，即使其他选项的字体大小不变。
jslywgbw4#
woooo我在不同的浏览器上尝试过这个，有一件事我发现，通过给select-tag选项添加填充，除了其他浏览器（crome，ie，safari）之外，这只在firefox中有效。。。！！！！！！
奇怪。。！！！！
所以你可以试着用
或用于下拉的jquery插件