OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

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


分享到
分类 JS学习   关键字 JavaScript   发布 kris  1453776529578
注意 转载须保留原文链接,译文链接,作者译者等信息。  
目前在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;
}


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


社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 轻量级的可调视图和面板分栏Layout布局工具[开源]
  2. 八张图告诉你什么是大数据
  3. 什么是Spark,如何使用Spark进行数据分析
  4. 天猫双11前端分享系列(四):大规模 Node.js 应用
  5. 快速激发灵感的7个安卓应用模板
  6. NodeJS将有望使用微软的ChakraCore JavaScript引擎驱动
  7. 使用Node.js操作跨平台数据库Firebird
  8. 改变手机浏览器(iPhone/Android)上文本输入框的默认弹出键盘(数字)
  9. AirJD-简单好用的免费建站工具

 相关阅读 - JS学习
  1. 改变手机浏览器(iPhone/Android)上文本输入框的默认弹出键盘(数字)
  2. 掌握Node.js的文件系统[File System 基础]
  3. JavaScript也有getter/setter方法:ES5 Object对象的5个不为人知的特性
  4. ES6中的Map与JSON的相互转化(序列和持久化)
  5. 用jQuery和JavaScript深度复制JSON对象的方法
  6. Node.js中的通用基础设计模式
  7. WowJS:在滚动页面时添加动画效果的简单实现
  8. [PPT]JavaScript初级教程
  9. JavaScript中的哈希表(Hash Maps的最佳实践)
  10. 我是怎么从顾虑到热爱ReactJS的(与AngularJS经典MVC数据绑定的对比)

 关键字 - JavaScript
  1. Node.JS更改Windows注册表regedit的几种方法
  2. AngularJS在大型单页面应用中的性能优化(二)
  3. WebPack:更优秀的模块依赖管理工具,及require.js的缺陷
  4. Debian下设置Linux Shell脚本开机自动启动Node.JS进程
  5. Node.JS通过原型和类继承EventEmitter,实现收发事件的几种方法
  6. NodeBots-JavaScript在智能设备驱动(物联网)中的崛起
  7. JavaScript的设计缺陷?浮点运算:0.1 + 0.2 != 0.3
  8. 少年,不要滥用箭头函数啊:JS中lambda表达式的优缺点和使用场景
  9. 可视化Web报表OnceVI中用户输入表单验证与提交
  10. 如何基于SVG矢量图制作一个可填写信息的可视化表单-OnceVI

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号