Question

我正在创建一个网站，并添加了一个页脚，该页脚具有指向我的GitHub个人资料和网站存储库的链接。页脚看起来像我想要的样子，除了链接彼此相邻且大麦之间有任何空间。我尝试添加一个段落，在链接之间仅包含空格，但是随后使页脚仅包含三行。如何在链接之间添加一些空间并使它们保持在同一行。

这是我的页脚的CSS和HTML：

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: DarkGray;
  text-align: center;
  line-height: 50px;
}

<div class="footer">
 <a href="[github profile url]">GitHub Profile</a>
 <a href="[website repo link]">Website Repo</a>
</div>

Answer 1

好吧，您可以使用padding属性来实现链接之间的间距。例如：放置具有相同名称的链接类：

<div class="footer">
 <a href="[github profile url]" class="footer__link">GitHub Profile</a>
 <a href="[website repo link]" class="footer__link">Website Repo</a>
</div>

，然后在CSS中：

.footer__link {
    padding-right: (your value --> it could be in px,em,rem etc.);
}

Answer 2

对于这种情况，我喜欢使用flexbox。在这种情况下，我在空间周围添加了证明选项，但还有更多选择。有关更多信息，请参见https://www.w3schools.com/css/css3_flexbox.asp：

.footer {
  position: fixed;
  display: flex;
  justify-content: space-around;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: DarkGray;
  text-align: center;
  line-height: 50px;
}

<div class="footer">
  <a href="[github profile url]">GitHub Profile</a>
  <a href="[website repo link]">Website Repo</a>
</div>

Answer 3

只需在CSS中使用裕度，如下所示：

.footer a:first-child{
  margin-right: 50px(change to how much you want);
}

Answer 4

我通常通过创建一个类来填充有问题的项目来分隔类似的元素。在元素上添加填充可以使它们间隔开。您可以使用各种“ display”设置更改元素在其父元素中的位置，或者使用margin甚至border在事物之间放置空间，甚至使用columns提供的空间，但似乎最适合使用填充。

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: DarkGray;
  text-align: center;
  line-height: 50px;
}

.footer-links {
	padding: 0 10px 0 10px; /* padding-top, padding-right, padding-bottom, padding-left */
}

<div class="footer">
 <a class="footer-links" href="[github profile url]">GitHub Profile</a> /* add this class to each of your footer items */
 <a class="footer-links" href="[website repo link]">Website Repo</a>
</div>

Answer 5

您可以在定位标记的两侧添加填充或边距。

.footer a {
   padding: 0 10px; /**Or whatever value you want**/
}

/**OR**/

.footer a {
   margin: 0 10px; /**Or whatever value you want**/
}
```

分隔网页页脚中的超链接

5 个答案: