如何修复图像之间的距离？

Question

我有这个网站：

link

代码HTML：

 <ul class="instagram-images">
                <li><a target="_blank" href="<?php echo ot_get_option('instagram_photo_1'); ?>"><?php echo do_shortcode('[instagram_embedding url="'.ot_get_option('instagram_photo_1').'" s="t"]'); ?></a></li>
                <li><a target="_blank" href="<?php echo ot_get_option('instagram_photo_2'); ?>"><?php echo do_shortcode('[instagram_embedding url="'.ot_get_option('instagram_photo_2').'" wrap_margin="10" s="t"]'); ?></a></li>
                <div class="clearfix"></div>
                <li class="big-news pull-left"><?php echo do_shortcode('[display-posts include_excerpt="false" category="news" image_size="news" wrapper="div" posts_per_page="1" orderby="date"]'); ?></li>
                <li><a target="_blank" href="<?php echo ot_get_option('instagram_photo_3'); ?>"><?php echo do_shortcode('[instagram_embedding url="'.ot_get_option('instagram_photo_3').'" s="t"]'); ?></a></li>
                <li><a target="_blank" href="<?php echo ot_get_option('instagram_photo_4'); ?>"><?php echo do_shortcode('[instagram_embedding url="'.ot_get_option('instagram_photo_4').'" s="t"]'); ?></a></li>
                <li><a target="_blank" href="<?php echo ot_get_option('instagram_photo_5'); ?>"><?php echo do_shortcode('[instagram_embedding url="'.ot_get_option('instagram_photo_5').'" s="t"]'); ?></a></li>

                <li><a target="_blank" href="<?php echo ot_get_option('instagram_photo_6'); ?>"><?php echo do_shortcode('[instagram_embedding url="'.ot_get_option('instagram_photo_6').'" s="t"]'); ?></a></li>
                <li class="big-news pull-right rightm"><?php echo do_shortcode('[display-posts include_excerpt="false" offset="1" category="news" image_size="news" wrapper="div" posts_per_page="1" orderby="date"]'); ?></li>
                <li><a target="_blank" href="<?php echo ot_get_option('instagram_photo_7'); ?>"><?php echo do_shortcode('[instagram_embedding url="'.ot_get_option('instagram_photo_7').'" s="t"]'); ?></a></li>
                <li><a target="_blank" href="<?php echo ot_get_option('instagram_photo_8'); ?>"><?php echo do_shortcode('[instagram_embedding url="'.ot_get_option('instagram_photo_8').'" s="t"]'); ?></a></li>

                <li><a target="_blank" href="<?php echo ot_get_option('instagram_photo_9'); ?>"><?php echo do_shortcode('[instagram_embedding url="'.ot_get_option('instagram_photo_9').'" s="t"]'); ?></a></li>
                <li><a target="_blank" href="<?php echo ot_get_option('instagram_photo_10'); ?>"><?php echo do_shortcode('[instagram_embedding url="'.ot_get_option('instagram_photo_10').'" s="t"]'); ?></a></li>

                <li><a target="_blank" href="<?php echo ot_get_option('instagram_photo_11'); ?>"><?php echo do_shortcode('[instagram_embedding url="'.ot_get_option('instagram_photo_11').'" s="t"]'); ?></a></li>
                <li><a target="_blank" href="<?php echo ot_get_option('instagram_photo_12'); ?>"><?php echo do_shortcode('[instagram_embedding url="'.ot_get_option('instagram_photo_12').'" s="t"]'); ?></a></li>
                <li><a target="_blank" href="<?php echo ot_get_option('instagram_photo_13'); ?>"><?php echo do_shortcode('[instagram_embedding url="'.ot_get_option('instagram_photo_13').'" s="t"]'); ?></a></li>
                <li><a target="_blank" href="<?php echo ot_get_option('instagram_photo_14'); ?>"><?php echo do_shortcode('[instagram_embedding url="'.ot_get_option('instagram_photo_14').'" s="t"]'); ?></a></li>
            </ul>

CODE CSS：

.instagram-images li{
  width:18%;
  margin:0 0.8%;
  display:inline-block;
}
.instagram-images li img{
  margin:0.5% 0;
}

我更清楚地了解了他们想要做的事情。

基本上我想要的是，不管对称间隔的地方

如果你不明白我的意思，请告诉我

提前致谢！

Answer 1

这是因为li元素是内嵌并被视为文本元素，这意味着浏览器会在这种情况下在单词或内联元素之间添加间隙。要消除差距，您可以将font-size设置为0：

ul.instagram-images > li {
  font-size: 0;
}

ul.instagram-images > li a{
  font-size: 14px; // restore base font size
}

但这不是一个可靠的解决方案，因为有些移动浏览器不允许font-size并将最小font-size设置为大于0的内容。

这就是为什么在这种情况下使用li会有什么不对。如果您仍想使用li但没有差距，则应将float: left;放在li上。这可能会也可能不会起作用，具体取决于您尝试实现的li布局类型。

另一种解决方案是删除</li><li>标记之间的空格（注意我是指关闭标记并打开标记后的空格）。这里描述了黑客：css-tricks.com

Answer 2

如果标记中有空格，则内联块之间会有空格。

所以你必须删除空格。或者您可以使用其他方式，例如float或flexbox。

写入原始

ul {
  text-align: center;
}

li {
  list-style: none;
  display: inline-block;
  border:1px solid #000;
}

<ul>
  <li>1</li><li>2</li><li>3</li>
</ul>

或者

ul {
  text-align: center;
}

li {
  list-style: none;
  display: inline-block;
  border:1px solid #000;
}

<ul>
  <li>
    1
  </li><li>
    2
  </li><li>
    3
  </li>
</ul>

使用评论

ul {
  text-align: center;
}

li {
  list-style: none;
  display: inline-block;
  border:1px solid #000;
}

<ul>
   <li>1</li><!--
--><li>2</li><!--
--><li>3</li>
</ul>

不要明确关闭li

ul {
  text-align: center;
}

li {
  list-style: none;
  display: inline-block;
  border:1px solid #000;
}

<ul>
  <li>1
  <li>2
  <li>3
</ul>

PS：来自this answer（俄语）。