开发一个活动页面,遇到这样一个怪异现象,按理来说,input
的前一个元素(一个小图标)使用了absolute定位,脱离了文本流,input
理应占据icon
原来的位置,但是input
愣是要换行,不和icon在一行。后来又奇怪的发现给input
加上display:inherit
他就上去了,然后查了下它之前起作用的定位是inline-block
下面附上截图:
开发一个活动页面,遇到这样一个怪异现象,按理来说,input
的前一个元素(一个小图标)使用了absolute定位,脱离了文本流,input
理应占据icon
原来的位置,但是input
愣是要换行,不和icon在一行。后来又奇怪的发现给input
加上display:inherit
他就上去了,然后查了下它之前起作用的定位是inline-block
下面附上截图:
input
宽度 100% 加 border 一行放不下,当然这个不是主要原因。
input
前面有空格,是行内的布局。前面的空格显示为一个空格,占了一个字符的位置。
所以浏览器检测到这一行不在内放下input
所以就放到了下一行。
要么吧空格都去掉,要么用nowrap
2 回答856 阅读✓ 已解决
4 回答948 阅读✓ 已解决
2 回答1.4k 阅读✓ 已解决
2 回答1.2k 阅读✓ 已解决
2 回答826 阅读✓ 已解决
2 回答1k 阅读✓ 已解决
2 回答2.6k 阅读
display:inline-block,会把换行符,空格也计算进去,而且你width:100%,可能这样就掉下去了吧?
input{display:block}应该就好了。