html - 为什么我得到空间堆叠的 v-for 列表和一个常规的 a 标签？

Question

我正在渲染一个图标链接列表，使用 v-for 并在它之后添加一些其他图标列表项。

为什么最后附加的元素会占用空间？显然，我检查了我的 css，它没有任何边距、填充等的规则。

如您所见，在没有 v-for 的情况下，列表中的每个元素周围都有这个空格。

<span style="padding-top:10px;display: block;">
  <a v-for="s in social.sites" :href="s.userPageUrl" target="_blank">
    <img :src="s.iconUrl" style="display: inline-block; margin-bottom: 4px;" nosend="1" :width="social.wh" :height="social.wh">
  </a>
  <a :href="contacts.skype"><img src="imgurl" style="display: inline-block; margin-bottom: 4px;" nosend="1" :width="social.wh" :height="social.wh"></a>
  <a :href="contacts.skype"><img src="imgurl" style="display: inline-block; margin-bottom: 4px;" nosend="1" :width="social.wh" :height="social.wh"></a>
  <a :href="contacts.skype"><img src="imgurl" style="display: inline-block; margin-bottom: 4px;" nosend="1" :width="social.wh" :height="social.wh"></a>
</span>

new Vue({
  el: "#app",
  data: {
    demoL: "https://i.imgur.com/Nk3PKVZ.png",
    social: {
      sites: [
       { 
         iconUrl: "https://i.imgur.com/Nk3PKVZ.png",
         userPageUrl: "sdf"
       },
       {
         iconUrl: "https://i.imgur.com/Nk3PKVZ.png", 
         userPageUrl: "sdf"
       },
       {
         iconUrl: "https://i.imgur.com/Nk3PKVZ.png", 
         userPageUrl: "sdf"
       }
    ]
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
<span style="display: block;">
  <a v-for="s in social.sites" :href="s.userPageUrl">
    <img :src="s.iconUrl" style="display: inline-block; margin-bottom: 4px;" nosend="1" width="20" height="20">
  </a>
  
  
  <a href=""><img :src="demoL" style="display: inline-block; margin-bottom: 4px;" nosend="1" width="20" height="20"></a>
  <a href=""><img :src="demoL" style="display: inline-block; margin-bottom: 4px;" nosend="1" width="20" height="20"></a>
  <a href=""><img :src="demoL" style="display: inline-block; margin-bottom: 4px;" nosend="1" width="20" height="20"></a>
</span>

</div>

Answer 1

经典( block 级)解决方案是给 children :

a {
  display: inline-block;
  float: left;
}

并申请overflow: hidden;父级(扩展其背景以包括所有 float 子级)。

适用于您的情况的现代解决方案是给 parent display:flex (如果有任何情况你想让 child 换行，也添加 flex-wrap:wrap 到它)。

---

为什么？
默认情况下， anchor 有 display:inline .这意味着就您而言，它们在文本中显示为字母。当你写 l e t t e r s您不希望浏览器删除字母之间的空格。
当字母是…… anchor 时，您为什么期望它？

作为替代方案，您可以简单地删除 <a> 末尾之间的任何空格或制表符。标记和下一个的开头。

以上是简化了一点，但足以了解原因。

这就是简化的原因:任何 display:inline根据text-wrap，元素可以包含其他元素和空格，这将决定内联内容的换行方式。属性(property)。或者，它的元素可以有一个 display inline 以外的值这也会破坏父级的内联行为。因此，更好的关联方式是文本中的单词，而不是字母。

为了您问题的意图和目的，要么让 children inline-block s 并 float 它们或给 parent 一个 display flex 的值或 inline-flex将工作。或者，您可以有效地删除 > 之间的任何空格、制表符或换行符。和 < .

删除空格(同时保持代码可读位置)的一种简便方法是将结束标记的结束字符放在下一行:

new Vue({
  el: "#app",
  data: {
    demoL: "https://i.imgur.com/Nk3PKVZ.png",
    social: {
      sites: [
       { 
         iconUrl: "https://i.imgur.com/Nk3PKVZ.png",
         userPageUrl: "sdf"
       },
       {
         iconUrl: "https://i.imgur.com/Nk3PKVZ.png", 
         userPageUrl: "sdf"
       },
       {
         iconUrl: "https://i.imgur.com/Nk3PKVZ.png", 
         userPageUrl: "sdf"
       }
    ]
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
<span style="display: block;">
  <a v-for="s in social.sites" :href="s.userPageUrl">
    <img :src="s.iconUrl" style="display: inline-block; margin-bottom: 4px;" nosend="1" width="20" height="20">
  </a
  ><a href=""><img :src="demoL" style="display: inline-block; margin-bottom: 4px;" nosend="1" width="20" height="20"></a
  ><a href=""><img :src="demoL" style="display: inline-block; margin-bottom: 4px;" nosend="1" width="20" height="20"></a
  ><a href=""><img :src="demoL" style="display: inline-block; margin-bottom: 4px;" nosend="1" width="20" height="20"></a></span></div>

但是，在生产环境中不推荐使用这种技术，尤其是当不止一个开发人员在同一代码库上工作时，因为它太脆弱并且很难发现错误。

通过 CSS 控制它们的显示行为是正确的方法。

Flexbox 解决方案:

new Vue({
  el: "#app",
  data: {
    demoL: "https://i.imgur.com/Nk3PKVZ.png",
    social: {
      sites: [
       { 
         iconUrl: "https://i.imgur.com/Nk3PKVZ.png",
         userPageUrl: "sdf"
       },
       {
         iconUrl: "https://i.imgur.com/Nk3PKVZ.png", 
         userPageUrl: "sdf"
       },
       {
         iconUrl: "https://i.imgur.com/Nk3PKVZ.png", 
         userPageUrl: "sdf"
       }
    ]
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
<span style="display:flex;">
  <a v-for="s in social.sites" :href="s.userPageUrl">
    <img :src="s.iconUrl" style="display: inline-block; margin-bottom: 4px;" nosend="1" width="20" height="20">
  </a>
  <a href=""><img :src="demoL" style="display: inline-block; margin-bottom: 4px;" nosend="1" width="20" height="20"></a>
  <a href=""><img :src="demoL" style="display: inline-block; margin-bottom: 4px;" nosend="1" width="20" height="20"></a>
  <a href=""><img :src="demoL" style="display: inline-block; margin-bottom: 4px;" nosend="1" width="20" height="20"></a></span></div>

内联 block 解决方案:

new Vue({
  el: "#app",
  data: {
    demoL: "https://i.imgur.com/Nk3PKVZ.png",
    social: {
      sites: [
       { 
         iconUrl: "https://i.imgur.com/Nk3PKVZ.png",
         userPageUrl: "sdf"
       },
       {
         iconUrl: "https://i.imgur.com/Nk3PKVZ.png", 
         userPageUrl: "sdf"
       },
       {
         iconUrl: "https://i.imgur.com/Nk3PKVZ.png", 
         userPageUrl: "sdf"
       }
    ]
    }
  }
})

#app > span {
  overflow: hidden;
}
#app > span > a {
  display: inline-block;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
<span style="display:block;">
  <a v-for="s in social.sites" :href="s.userPageUrl">
    <img :src="s.iconUrl" style="display: inline-block; margin-bottom: 4px;" nosend="1" width="20" height="20">
  </a>
  <a href=""><img :src="demoL" style="display: inline-block; margin-bottom: 4px;" nosend="1" width="20" height="20"></a>
  <a href=""><img :src="demoL" style="display: inline-block; margin-bottom: 4px;" nosend="1" width="20" height="20"></a>
  <a href=""><img :src="demoL" style="display: inline-block; margin-bottom: 4px;" nosend="1" width="20" height="20"></a></span></div>