如何建立一个社交栏并定位它的按钮？答案

【问题标题】：How to build a social bar and to position it's buttons?如何建立一个社交栏并定位它的按钮？
【发布时间】：2017-04-25 13:30:48
【问题描述】：

我正在尝试构建一个包含 5 个按钮的基本栏，每个按钮都由一个图标和下面描述图标的文本组成。我希望所有图像都在同一行，并且描述将在下面。

    <a href="tel:036781223333" title ="call us"><img src=phone.png />call office </a>
<a href= "http://www.bgasgdhen.com/" title = "website"><img src=circle.png />link to website </a>
<a href= "advbagsgadron.vcf" title = "add to contacts"><img src=book.png />add to contacts </a>

例如，在此代码中，“call office”应位于第一个 img 下方，“link to website”应位于第二个下方等等在 itws 图标旁边。你能帮我吗？谢谢

【问题讨论】：

首先，这些应该在一个列表中，然后你应该在<img>-tag 之后放置一个<br>。
请尝试添加更多信息。这可能包括您已经尝试过的内容、有效/无效的内容以及任何其他可能有助于他人回答您的问题的信息。

标签： css html xhtml

【解决方案1】：

这样做：图标/链接被放置在一个列表中，HTML 被清理，我添加了一些 CSS 来展示它的外观

ul {
  list-style-type: none;
  }
li {
  display: inline-block;
  margin: 1em;
  }
li a {
  display: block;
  text-align: center;
  }
li a img {
  margin: 0 auto;
  display: block;
  width: 3em;
  height: 3em;
  }

<ul>
<li><a href="tel:036781223333" title="call us"><img src=phone.png><br>call office</a></li>
<li><a href="http://www.bgasgdhen.com/" title="website"><img src=circle.png><br>link to website</a></li>
<li><a href="advbagsgadron.vcf" title="add to contacts"><img src=book.png><br>add to contacts</a></li>
</ul>

【讨论】：

【解决方案2】：

我也会更改 HTML。把文本放在那里，因为图像没有语义价值。使用 CSS 你可以显示图标，你甚至不需要一个元素。只需使用::before 伪元素即可。

nav.social {
  text-align: center;
}
nav.social a {
  display: inline-block;
  padding: 3px;
}
nav.social a::before {
  content: "";
  display: block;
  height: 32px;
  background: url(http://www.phonebook.com/favicon.ico) top center no-repeat;
}
nav.social a.website::before {
  background-image: url(http://stackoverflow.com/favicon.ico);
}
nav.social a.vcard::before {
  background-image: url(https://en.wikipedia.org/favicon.ico);
}

<nav class="social">
  <a class="phone" href="tel:036781223333" title="call us">call office</a>
  <a class="website" href="http://www.bgasgdhen.com/" title="website">link to website </a>
  <a class="vcard" href="advbagsgadron.vcf" title="add to contacts">add to contacts </a>
</nav>

【讨论】：