一个css样式问题

问题描述

问 题

最近上手实现一个react的todolist Demo。想要实现双击隐藏todo项，切换一个input输入框出来修改当前像。在样式上遇到一个问题，双击之后input向下偏移了一些，并不是在原todo项的位置上，感觉好像是html的font-size造成的（设置这个font-size是想做响应式布局，最好不要动），求指点该如何解决及出现这个现象的原因是什么，具体代码在链接里：CodePen。

解决方案

常见的display:inline-block的问题，input默认下为display:inline-block。
inline-block元素会导致同级下的空白符也会占据一定的宽度空间，
常见的解决问题方法有很多

1. 改变元素的display为block等，假如需要同行排列可以用float(pia，这还用你说
2. 父元素使用font-size:0，子元素设定font-size,以前可能需要一定兼容，但是现在应该是不用了
3. 花式方法把你的inline-block元素贴起来，虽然不太适用于这种动态改变元素的情况
   其他还有用css去做兼容的方法，但是个人觉得可能已经过时了。

对于lz这种情况其实只要改为display:block，最方便快捷了。

这篇关于一个css样式问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！