ready
论坛版主
论坛版主
  • UID24
  • 粉丝0
  • 关注0
  • 发帖数433
  • 社区居民
  • 忠实会员
  • 原创写手
阅读:6310回复:0

如何用CSS将select/option文本居中或居右对齐

楼主#
更多 发布于:2018-08-29 18:54
  • 目前在select元素中你使用css: text-align, 你会发现根本不起作用。
    select { text-align: right }
    option { text-align: right }
    似乎在所有基于webkit的浏览器没有对select实现text-align这个CSS属性。
    这里有一些临时的解决方案
    1) 简单点的使用padding使其“看上去”对齐
    比如: 这里比较适合宽度固定的场合,只要padding合适,效果还是不错的
    select {
    ...
    padding: 0 0 0 20px;
    }
    示例 http://jsfiddle.net/P5k4D/1/
    2) 使用一些UI库实现
    比如jQueryUI的select menu http://jqueryui.com/selectmenu/
    优点是可以解决select控制在各个浏览器界面不一致的问题。
    3) 居右对齐: 可以使用rtl属性来来控制,
    <select dir="rtl">
    <option>Foo</option>
    <option>bar</option>
    <option>to the right</option>
    </select>
    写成CSS的话则为:
    select {
    direction: rtl;
    }




  • 以上是如何用CSS将select/option文本居中或居右对齐的内容,更多 对齐 居中 何用 文本 option select 居右 css 的内容,请您使用右上方搜索功能获取相关信息。
游客


返回顶部