文本框和按钮利用flex布局横向排列后两个问题
1.文本框、按钮没有对齐
2.文本框、按钮没有贴在一起
问题1:文本框、按钮没有对齐
解决办法:
(1)给文本框添加vertical-align: bottom
(2)不用flex布局,改为用浮动float来横向排列
详细讲解vertical-align:
从vertical-align看基线对齐方式 - 简书
问题2:文本框、按钮没有贴在一起
浏览器会把inline内联元素间的空白字符(空格、换行、Tab等)渲染成一个空格。
解决办法:
(1)改变html结构,两个input标签写一行,不换行
(2)不用flex布局,改为用浮动float来横向排列
(3)添加margin-left,且为负数