Question

我正在尝试构建一个包含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>

例如，

在此代码中，＆＃34;呼叫办公室＆＃34;应该低于第一个img，＆＃34;链接到网站＆＃34;在第二个以下，依此类推，但它会写出描述，但描述与图标显示在同一行，itws图标旁边的每个描述。你能帮我吗？ THX

Answer 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>

Answer 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>

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

2 个答案: