为什么tp框架中for循环标签出来的图片没有间隔?

zhai斋
  • 95
<span class="f_star">
    <img src="Application/Service/View/Public/img/star_fff.png" width="100%" alt="">
</span>
<span class="f_star">
    <img src="Application/Service/View/Public/img/star_fff.png" width="100%" alt="">
</span>

<for start="0" end="3">
    <span class="f_star">
        <img src="Application/Service/View/Public/img/star_fff.png" width="100%" alt="">
    </span>
</for>

CSS:

.f_star {
    width: 14px;
    height: 14px;
    display: inline-block;
    border-radius: 3px;
    background: #FF9C01;
    padding: 2px;
    text-align: center;
    line-height: 10px;
}

示例 :clipboard.png

怎么才可以使后面3个循环出来的可以和前两个一样有间距?

回复
阅读 1.5k
2 个回答
iam喂喂
  • 196
✓ 已被采纳

你这是因为inline-block造成的边距问题,你看html源码,for循环的代码span的结束和下一个开始标签是紧挨着的。
改一下css,在你的span的父级上加一个font-size:0;
然后给span样式加边距或填充。

建议你去看看 inline-block 的边距问题。这个是前端里很多人常犯的一个老问题了。

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