• html5中二进制对象Blob的使用——Blob与ArrayBuffer、TypeArray和String的相互转换


    在网页开发中遇到这样一个问题,在使用select的时候,想让里面的文字水平居中。首先想到的是text-align:center;但是发现在Chrome浏览器下不兼容,需要使用到text-align-last:center;就可以了。代码如下:

    select{
    	 400px;
    	text-align:center;
    	text-align-last:center;/*兼容chrome*/
    }
    </style>
    <select>
    	<option value="1">No-1</option>
    	<option value="2">No-2-我的内容很多哦。哈哈</option>
    </select>

    设计网站大全https://www.wode007.com/favorites/sjdh

    但是上面代码在Safari上没起作用;如果不考虑Safari的兼容上面代码就可以了。如果要兼容,我们可以在用一个div包裹select,在该div内添加一个span元素,用js去绑定span里的值和select的值,让span元素居中,隐藏掉select就可以了。代码如下:

    css:

    <style>
    #box{
          400px;
         border: 1px solid #ddd;
         text-align: center;
         position: relative;
    }
    select{
        position: absolute;  
        left: 0px;  
        top: 0px;  
         100%;  
        height: 100%;  
        opacity: 0; 
    }
    </style>

    html:

    <div id="box">
    	<span id="show">No-1</span>  
    	<select>
    		<option value="1">No-1</option>
    		<option value="2">No-2-我的内容很多哦。哈哈</option>
    	</select>
    </div>

    js:

    <script>
    window.onload=function(){
    	var show=document.getElementById('show');
    	var sel=document.getElementsByTagName('select')[0];
    	sel.onchange=function(){
    		var index=sel.selectedIndex; //序号,取当前选中选项的序号
    		show.innerText=sel.options[index].text;
    	}
    }
    </script>

    这样就可以简单模拟实现select居中的效果了,但是上面代码并不完善,例如没有下拉框的箭头,这个大家可以自己添加上去。在js上面如果使用了框架,如vue,angularjs等,就可以很简单的实现数据的双向绑定,实现就更简洁了。

    延伸:如何让option的文字居中呢?

    无论怎么尝试,都没发现能完美解决option中的值居中的方法。大部分需要这样的需求的同学,可能也是加空格来实现的,或者不使用select,利用div,js等完全模拟select下拉框效果。当然说实话:select的option居中效果很难看,你可以想象option中的值长度不一,居中还不如靠左对齐呐。

  • 相关阅读:
    oracle 日期和时间转换
    layui 分页 java后端封装
    excel 时间格式
    excel的编程VBA
    excel条件格式
    python列表变成字符串
    Django的ORM源码学习
    robot 源码解读6【元类和描述符类】
    @staticmethod
    python 类定义后调用名称也执行内部代码
  • 原文地址:https://www.cnblogs.com/ypppt/p/13113945.html
走看看 - 开发者的网上家园