select让文字居中

做手机项目中遇到想让select居中的问题,原以为是无解的。

看Jquerymobile的时候发现它的select可以居中,于是如下:

 

Html代码   收藏代码
  1. >  
  2. <html>  
  3. <head>  
  4. <title>title>  
  5. <style>  
  6.   
  7. .ui-select {  
  8.     text-align: center;  
  9.     /* 加border只是为了看到边框*/  
  10.     border:solid 1px;  
  11. }  
  12. .ui-select select {  
  13.     position: absolute;  
  14.     left: 0px;  
  15.     top: 0px;  
  16.     width: 100%;  
  17.     height: 3em;  
  18.     opacity: 0;  
  19. }  
  20.   
  21. style>  
  22. head>  
  23. <body>  
  24.     <div class="ui-select">  
  25.         <span>The 1st Optionspan>  
  26.         <select>  
  27.             <option value="1">The 1st Optionoption>  
  28.             <option value="2">The 2nd Optionoption>  
  29.             <option value="3">The 3rd Optionoption>  
  30.             <option value="4">The 4th Optionoption>  
  31.         select>  
  32.     div>  
  33. body>  
  34. html>  

 

基本实现思路就是隐藏掉select,实际点击到的是span。

你可能感兴趣的:(css知识点)