CSS 如何确保选择选项文本在 IE 中居中对齐?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/1911111/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to make sure select option text align in the center in IE?
提问by WilliamLou
The following CSS works in FF, but not in IE(at least 8.0), how can I make sure that the text align in the center for IE8.0? Thanks!!!
以下 CSS 在 FF 中有效,但在 IE 中无效(至少 8.0),如何确保文本在 IE8.0 的中心对齐?谢谢!!!
select, option {
text-align: center;
}
回答by Pekka
Unfortunately, you can't change the alignment of SELECT
items in IE, although it surprises me that even IE 8 keeps this bad habit.
不幸的是,您无法更改SELECT
IE中项目的对齐方式,尽管让我感到惊讶的是,即使是 IE 8 也保留了这个坏习惯。
回答by Chase Seibert
Given that this is not possible in IE, I think you would have to resort to:
鉴于这在 IE 中是不可能的,我认为您将不得不求助于:
Implementing your own SELECT widgets. There are many JS libraries that do this, mostly because SELECT inputs are hard to style.
Insert the appropriate whitespace in front of the smaller options.
实现您自己的 SELECT 小部件。有很多 JS 库可以这样做,主要是因为 SELECT 输入很难设置样式。
在较小的选项前插入适当的空格。
Edit: looks like whitespace doesn't work, but HTML space does:
编辑:看起来空白行不通,但 HTML 空间行得通:
<SELECT>
<OPTION> SMALL</OPTION>
<OPTION> LARGER</OPTION>
</SELECT>
That's quite a hack...
这是一个相当黑客...
回答by Vishu Singhvi
You can make a class and call it using the 'STYLE TAG' in the option field.::
您可以创建一个类并使用选项字段中的“样式标签”调用它。::
For Eg:--
例如:--
<style type="text/css">
select { width: 400px; text-align:center; }
select .lt { text-align:left; }
</style>
<select name="state" class="ddList">
<option value="">(please select a state)</option>
<option class="lt" value="--">none</option>
<option class="lt" value="AL">Alabama</option>
<option class="lt" value="AK">Alaska</option>
<option class="lt" value="AZ">Arizona</option>
<option class="lt" value="AR">Arkansas</option>
<option class="lt" value="CA">California</option>
<option class="lt" value="CO">Colorado</option>
</select>