zoukankan      html  css  js  c++  java
  • label和input表单的height问题

    (col-xs-是指占据container的多少,不是指占据body的多少)

    (line-height的单位还可以是%和em,其中%是指为字体的%多少倍)

    (em可以精确到小数点后三位,可以说是很方便了)

    1.row中的label和input放在一起的话,高度要给label和input,不要直接给row

    因为input会有自带的padding,如果给row的话它会把自己这一侧撑高2个像素,如下图:

    还有一种不用input,是显示的,那种我用的是row里放两个span,可以直接把高度给row

    因为子元素都是span,不会有标签自带的padding来撑大元素

    2.为了使高度达到适配,我使用em代替了px,但是这样做又有了一个新的问题

    在3中已知label和input的高度必须分别设置,但是实际上label和input内的字体不一样,所以就只能给row设置高度

    我给了label上下各一个像素的padding,这样就可以解决3中提到的撑高了,但不知为何input下降了几个像素,如图:

    后来我再仔细地看,发现了一个问题,不是input下降了几个像素,而是label和input一起下降了,如图是累积了几行之后的累积像素,实际上可能每行差了一个像素:

    我看了看,发现row的高度并不包含label和input的padding,因而每一行的row都比input和padding少一两个像素

    原来是因为我给row的高度是这样的:height为x,line-height也为x

    所以row的height是x,label和input的line-height是x,label和input的height是x+2(padding)

    因而我把label和input的上下padding都去掉了

    耶,终于没有被撑大啦,但是!!input没有border,效果变成了这个样子:

    因为row的border包含在它的height中,而label和input的height=row的height

    因此实际上border被掩盖了,可能因为label比较特殊,所以没有把label那边的border盖住

    row的结构是这样的:

    但是Height应该=height+边距+border呀

    不管啦,我直接把height去掉了,只留下了line-height,OK,一切解决

    这样一来,也不必费尽心思去掉input的上下padding了,我在已有的textLabel样式表中给label加上了上下padding

    果然是好好哒

    3.但是只靠line-height对select来说并没有用,select需要一个height才可以被撑大,我直接写了内联了

    4.同时头行元素对后几行元素的影响一文也有了解答

  • 相关阅读:
    File初识和练习
    图床
    servlet
    css伪类及伪元素用法
    css中的定位position
    块级元素与行级元素
    清除浮动
    CSS浮动
    fastjson 1.2.6以下版本 解析字符串末尾出现/x会陷入死循环 报oom异常
    记一次select2赋值动态数组的坑
  • 原文地址:https://www.cnblogs.com/wangchufang/p/8036367.html
Copyright © 2011-2022 走看看