Question

css中如何调解UL里面元素之间的间隔距离

这是CSS样式：
.list-h-6 li{ float:left;width:500px;height:100px;}
#spec-n5-6{width:500px; height:100px; padding-top:6px; overflow:hidden;}
#spec-list-6{ width:500px;height:100px; float:left; overflow:hidden; margin-left:2px; display:inline;}
#spec-list-6 ul li{ float:left; margin-right:0px; display:inline; width:100px;}
#spec-list-6 ul li img{ border:2px solid #ccc; width:60px; height:60px;}
#spec-list-6{ position:relative; width:450px; margin-right:6px;}
#spec-list-6 div{ margin-top:0;margin-left:-30px; *margin-left:0;}

一下是页面DIV的代码
<div id=spec-n5-6>
<div id=spec-list-6>
<ul class=list-h-6>
<li><img src="/static/image/diet/{{template | default:"1"}}/food1.png"> </li>
<li><img src="/static/image/diet/{{template | default:"1"}}/food2.png"> </li>
<li><img src="/static/image/diet/{{template | default:"1"}}/food3.png"> </li>
<li><img src="/static/image/diet/{{template | default:"1"}}/food1.png"> </li>
<li><img src="/static/image/diet/{{template | default:"1"}}/food2.png"> </li>
<li><img src="/static/image/diet/{{template | default:"1"}}/food3.png"> </li>
<li><img src="/static/image/diet/{{template | default:"1"}}/food1.png"> </li>
<li><img src="/static/image/diet/{{template | default:"1"}}/food2.png"> </li>
<li><img src="/static/image/diet/{{template | default:"1"}}/food3.png"> </li>
<li><img src="/static/image/diet/{{template | default:"1"}}/food1.png"> </li>
<li><img src="/static/image/diet/{{template | default:"1"}}/food2.png"> </li>
<li><img src="/static/image/diet/{{template | default:"1"}}/food3.png"> </li>
<li><img src="/static/image/diet/{{template | default:"1"}}/food1.png"> </li>
</ul>
</div>
</div>
我想将各个图片之间的间隔调小点 要如何弄呢？请有经验的人帮忙！

若以下回答无法解决问题，邀请你更新回答

Answer 1

li的宽度变小