问题 如何确保在IE的中心选择选项文本对齐?


以下CSS适用于FF,但不适用于IE(至少8.0),如何确保文本在IE8.0的中心对齐?谢谢!!!

select, option {
    text-align: center;
}

7135
2017-12-15 23:06


起源



答案:


不幸的是,你无法改变对齐方式 SELECT IE浏览器中的项目虽然让我感到惊讶,即使IE 8仍然存在这种坏习惯。


12
2017-12-15 23:09



没办法?! - WilliamLou


答案:


不幸的是,你无法改变对齐方式 SELECT IE浏览器中的项目虽然让我感到惊讶,即使IE 8仍然存在这种坏习惯。


12
2017-12-15 23:09



没办法?! - WilliamLou


鉴于这在IE中是不可能的,我认为你不得不诉诸:

  1. 实现自己的SELECT小部件。有很多JS库可以做到这一点,主要是因为SELECT输入很难设计。

  2. 在较小的选项前面插入适当的空格。

编辑:看起来像空格不起作用,但HTML空间确实:

<SELECT>
   <OPTION>&nbsp;&nbsp;&nbsp;SMALL</OPTION>
   <OPTION>&nbsp;&nbsp;LARGER</OPTION>
</SELECT>

这是一个非常黑客......


2
2017-12-15 23:17



空白不起作用,IE将它们附加到项目的右侧 - 无论出于何种原因...... - Pekka 웃


您可以使用选项字段中的“STYLE TAG”创建一个类并调用它。::

例如: -

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

-1
2017-11-22 05:38



这个解决方案在IE上失败,就像提出问题的作者那样。甚至没有谈论它似乎不忠实于他的愿望这一事实:不仅将文本集中在选择中,还集中在选项中...... - Daniel