前端 - Safari:select下拉框的字体不能居中。
问题描述
在chrome上使用text-align没有用,后来试了下text-align-last:center有作用,但是在Safari上 是无效的;Google后也没发现什么有价值的,有哪位遇到过吗?
问题解答
回答1:有一个hack的办法
在select的位置写一个span,用js去绑定span里的值和select的值,让span元素居中,隐藏掉select。
大约是这样的:
js的内容就自己写一下吧
.pesu-select { text-align: center;border:solid 1px #000; } .pesu-select select { position: absolute; left: 0px; top: 0px; width: 100%; height: 42px; opacity: 0; } <p class='pesu-select'> <span>aaa</span> <select> <option value='1'>aaa</option> <option value='2'>bbb</option> <option value='3'>ccc</option> </select> </p> 回答2:
其他途径解决问题:select外面包一层p,select的宽度不设置(由内容撑开),设置容器的宽度与text-align:center;
相关文章:
1. 如何解决docker宿主机无法访问容器中的服务?2. javascript - 微信jssdk ios下自定义onMenuShareAppMessage 分享失效,Android分享成功3. 老师百度网盘分享一下WampServer的包啊,我们下载几kb要下载一天的.4. java - 如图,同样一个表单,为什么用myeclipse内置的浏览器提交就会自动编码,用chrome浏览器就不会自动编码?5. node.js - windows下安装webpack时出现路径问题如何解决?6. 关于java 泛型设计接口 导致的参数类型不匹配问题7. javascript - vue中更改state的值8. SQLAlchemy 访问Mysql数据库弹出Warning,VARIABLE_VALUE,如何解决?9. java - 如何修改Eclipse项目那一块的背景颜色?10. vue.js - linux下怎么使用vue-cli的vue命令
