CSS设置select或option文本居中居右对齐

目前在select或option元素中使用style或css: text-align,发现根本不起作用:

1
2
select { text-align: right }
option { text-align: right }

似乎在所有基于webkit的浏览器没有对select实现text-align这个CSS属性。

这里有一些临时的解决方案

1) 居右对齐: 可以使用rtl属性来来控制

1
2
3
4
5
<select dir="rtl">
<option>Foo</option>
<option>Bar</option>
<option>to the right</option>
</select>

写成CSS的话则为:

1
2
3
select {
direction: rtl;
}

2) 使用一些UI库实现

比如jQueryUI的select menu:http://jqueryui.com/selectmenu/

优点是可以解决select控制在各个浏览器界面不一致的问题。

3) 简单点的使用padding使其“看上去”对齐

比如: 这里比较适合宽度固定的场合,只要padding合适,效果还是不错的

1
2
3
4
select {
...
padding: 0 0 0 20px;
}

参考:
http://stackoverflow.com/questions/19790687/horizontally-text-center-for-select-option
http://stackoverflow.com/questions/7920677/text-align-right-on-select-or-option

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :