求大神告诉为啥input元素愣是要换行

开发一个活动页面,遇到这样一个怪异现象,按理来说,input的前一个元素(一个小图标)使用了absolute定位,脱离了文本流,input理应占据icon原来的位置,但是input愣是要换行,不和icon在一行。后来又奇怪的发现给input加上display:inherit他就上去了,然后查了下它之前起作用的定位是inline-block

下面附上截图:
图片描述

图片描述

图片描述

图片描述
图片描述

阅读 7.8k
2 个回答

display:inline-block,会把换行符,空格也计算进去,而且你width:100%,可能这样就掉下去了吧?
input{display:block}应该就好了。

input 宽度 100% 加 border 一行放不下,当然这个不是主要原因。

input 前面有空格,是行内的布局。前面的空格显示为一个空格,占了一个字符的位置。
所以浏览器检测到这一行不在内放下input 所以就放到了下一行。
要么吧空格都去掉,要么用nowrap

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题