label和input表单的height问题

摘要:
(col xs-表示占用的容器数量,而不是占用的主体数量)(行高的单位也可以是%和em,其中%表示字体的%的次数)(em可以精确到小数点后三位,可以说非常方便)1.如果标签和行中的输入放在一起,那么高度应该给标签和输入,而不是直接给行,因为输入将有自己的填充,如果给定行,它的边将增加2个像素,如下图所示:另一个

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

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

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

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

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

label和input表单的height问题第1张

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

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

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

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

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

label和input表单的height问题第2张

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

label和input表单的height问题第3张

我看了看,发现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,效果变成了这个样子:

label和input表单的height问题第4张

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

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

row的结构是这样的:

label和input表单的height问题第5张

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

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

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

果然是好好哒

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

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

免责声明:文章转载自《label和input表单的height问题》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇[转]NSString/NSMutableString字符串处理和常用代码 (实例)JXL操作Excel下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

深入剖析PHP输入流 php://input

另附一个一个连接: http://www.nowamagic.net/academy/detail/12220520 ///////////////////////////////////////////////////////////////另一种解释////////////////////////////////////////////////////...

pl/sql中的取模运算

pl/sql语言的取模(即求余)运算不使用大部分语言所支持的 a%b 而是使用函数 mod(a,b) 例子如下:写一个匿名块判断某年是否是闰年,能被4但是不能被100整除,或者能被400整除 1 declare 2 judge varchar2(200); 3 year_input number; 4 begin 5 year_inp...

filter_input() 函数

定义和用法 filter_input() 函数从脚本外部获取输入,并进行过滤。 本函数用于对来自非安全来源的变量进行验证,比如用户的输入。 本函数可从各种来源获取输入: INPUT_GET INPUT_POST INPUT_COOKIE INPUT_ENV INPUT_SERVER INPUT_SESSION (Not yet implemented)...

input框中如何添加搜索

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" hr...

使用@supports完美兼容CSS属性

今天写微信小程序遇到一个问题:给page加 150rpx 的 padding-bottom 值,我考虑到 iphone X 系列的底部黑线,参考我之前写的css属性——env()和constant()设置安全区域;所以我这样写: page{ padding-bottom: calc( constant(safe-area-inset-bottom) +...

使用Tensorflow对模型进行量化

本文旨在将迁移学习训练好的模型基于tensorflow工具进行量化。 环境配置及迁移学习部分可参考博文[https://www.cnblogs.com/hayley111/p/12887853.html]。 首先使用如下workflow理解模型部署的过程,本文主要描述的是quant这一步。 1. 环境准备: 安装bazel bazel是一个开源的构造和测...