前端 - 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. android - java 泛型不支持数组,那么RxJava的Map集合有什么方便的手段可以定义获得一串共同父类集合数据呢?2. javascript - vue 移动端的input 数字输入优化3. javascript - 有什么兼容性比较好的办法来判断浏览器窗口的类型?4. java - 自己制作一个视频播放器,遇到问题,用的是内置surfaceview类,具体看代码!5. java - mongodb分片集群下,count和聚合统计问题6. 为什么我ping不通我的docker容器呢???7. 服务器端 - 采用nginx做web服务器,C++开发应用程序 出现拒绝连接请求?8. python - pandas按照列A和列B分组,将列C求平均数,怎样才能生成一个列A,B,C的dataframe9. 关于docker下的nginx压力测试10. java - 静态属性中的赋值和静态代码块中的赋值有什么区别?
