时间戳

首页 > 解决方案 > 分隔网页页脚中的超链接

html - 分隔网页页脚中的超链接

问题描述

我正在制作一个网站，并添加了一个页脚，其中包含指向我的 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>

标签： htmlcss

解决方案

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.);
}

推荐阅读