图零吧 关注:84贴子:1,517
  • 0回复贴,共1

4inline-block属性间距现象分析(转载)

取消只看楼主收藏回复

此问题是设置样式属性displayinline-block。应用常例是li属性设置水平放置后出现间隙。
照图说话;

例如上图很明显可以看出第二行间隙比第一行小,第一行为间隙样例,我本来设置两个li之间间距为15应该为第二行效果,但是在html写出代码:
<li><img /><div>党的进什么文件但还是觉得很受打击.jpg</div><input id="radio4" type="radio" name="fileRadio"><label for="radio4"></label></li>
<li><img /><div>党的进什么文件但还是觉得很受打击.jpg</div><input id="radio5" type="radio" name="fileRadio"><label for="radio5"></label></li>
<li><img /><div>党的进什么文件但还是觉得很受打击.jpg</div><input id="radio6" type="radio" name="fileRadio"><label for="radio6"></label></li>
效果就是第一行的效果,第二行是使用js进行添加的li就是正确的margin-right:15px. 而第二行确多出一部分空隙。然后我再次修改html代码为:
<li><img /><div>党的进什么文件但还是觉得很受打击.jpg</div><input id="radio4" type="radio" name="fileRadio"><label for="radio4"></label></li><li>
<img /><div>党的进什么文件但还是觉得很受打击.jpg</div><input id="radio5" type="radio" name="fileRadio"><label for="radio5"></label></li><li><img />
<div>党的进什么文件但还是觉得很受打击.jpg</div><input id="radio6" type="radio" name="fileRadio"><label for="radio6"></label></li>
效果为:

这样就没有间隙了,看出问题所在了,就是因为写代码元素标签之间的空格所致。但是我们有不能所有的代码都按照写在一行,一是不易于读不易于维护,二是很乱。
解决方案总结:
1、写成一行(不可取也是一种方式,,哈哈哈)
2、第二中就是有规则分分行,例如我这个就可以这样写:
<li><img /><div>党的进什么文得很受打击.jpg</div><input id="radio1" type="radio" name="fileRadio"><label for="radio1"></label></li><li><img /><div>
党的进什么文件但还是觉得很受打击.jpg</div><input id="radio2" type="radio" name="fileRadio"><label for="radio2"></label></li><li><img /><div>
党的进什么文件但还是觉得很受打击.jpg</div><input id="radio6" type="radio" name="fileRadio"><label for="radio6"></label></li>
3、借助注释语句来去除空格
<li><img /><div>党的进什么文得很受打击.jpg</div><input id="radio1" type="radio" name="fileRadio"><label for="radio1"></label></li><!--
--><li><img /><div>党的进什么文件但还是觉得很受打击.jpg</div><input id="radio2" type="radio" name="fileRadio"><label for="radio2"></label></li><!--
--><li><img /><div>党的进什么文件但还是觉得很受打击.jpg</div><input id="radio6" type="radio" name="fileRadio"><label for="radio6"></label></li>
4、不写结束标签,就是li的结束标签不写即可:
<li><img /><div>党的进什么文得很受打击.jpg</div><input id="radio1" type="radio" name="fileRadio"><label for="radio1"></label> <li><img /><div>党的进什么文件但还是觉得很受打击.jpg</div><input id="radio2" type="radio" name="fileRadio"><label for="radio2"></label>
5. 样式的问题还是采用样式解决,哈哈使用文字间距属性letter-spacing。只需要在间隙元素上设置为0px,然后看多出多少元素在简单元素的父元素设置负数值就好了。例如我这个就是在li元素设置{ letter-spacing:0px;}然后在父元素设置ul{letter-spacing:-8px}


1楼2018-08-31 14:05回复