css,html布局遇到一个问题
本文介绍了css,html布局遇到一个问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
https://jsfiddle.net/x3cqwm8q/
我现在想一行显示, input 输入框要铺满右边剩余的空间,
但是给input 设置 100% 就换第二行了。
如果用position, PC能铺满, 但是到了移动端就坑爹了。
如何解决这个问题? input输入框要铺满右边剩余的空间。
解决方案
用 flex 吧。
给 div 写一个display: flex;
, 然后把 input 的width: 100%;
去掉, 写成flex-grow: 1;
。
完美兼容PC和移动端, 需要注意的是 label 的 height 会根据 input 的 height 变化。
这篇关于css,html布局遇到一个问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文