zoukankan      html  css  js  c++  java
  • input与select 设置相同宽高,在浏览器上却显示不一致,不整齐

    遇到 input与select 设置相同宽高,在浏览器上却显示不一致,遂实验了下(IE 10.013 ,Firefox 30.0),得出以下结论

    input   width,height 值里面, 不包含 border边框和padding内边距,即:设置的只是内容本身的高与宽。border与padding不在值里面,在浏览器上显示可见。

    select  width,height 值里面, 包含 border边框和padding内边距,即:设置的高宽里面包含了内容本身,border与padding的整体。padding值,border,内容是从值里面分走的高宽度,所以内容高宽会相对减小。如果padding值超过了对应值,整体样式会变。

    所以,两者设置相同的值,却会显示不整齐。

     

    下图黄色为border边框,绿色padding,中间的蓝色是内容。

             下图input                  下图select

    input{ height:32px; 200px; }       select{ height:32px; 200px; } 

     

    显示:

    input{ height:32px; 200px; }       select{ height:clac(32px + 2px); clac(200px + 2px); }

    显示:

    input{ height:32px; 200px; padding:10px 10px; }  select{ height:clac(32px + 2px); clac(200px + 2px); padding:10px 10px; }


    显示:

               

     

    以上实验在pc端实用,今天发现在手机端行不通,特此为记:

    在手机端的状态是,width可以设置宽度,而高度用height不顶用,两种方法可以改变高度:

    1.font-size可以撑起宽度,但字体改变了

    2.加上multiple时宽度可用,但option变成多选状态了;

    所以以上都不完美

    解决方法:

        把select放到一个div里面,把div高宽调成与同级input相同,设置overflow:hidden隐藏select溢出,select宽度设成100%,border:none,

    至于垂直居中:由于select不能设高度,就用jquery控制,获取select高度outerHeight, margin-top:div高度减去它除以二,select设display:block。

    好了,说到这里了,下次用到时参考下,在调试吧。

     

     

  • 相关阅读:
    JavaScript(16):横版菜单栏
    JavaScript(15):表格行之增删改
    JavaScript(14):实现jQuery的click绑定及链式编程
    c++ -- 左值和右值
    c++--模板与泛型编程
    python--导入其他文件夹下的模块(.py文件)
    python--pickle序列化(持久化)
    python--matplotlib显示中文问题(四种方法)
    machine learning--L1 ,L2 norm
    python--'__main__'的作用
  • 原文地址:https://www.cnblogs.com/qing-xuanlvyee/p/3868702.html
Copyright © 2011-2022 走看看