分离网页页脚中的超链接
分离网页页脚中的超链接
提问于 2019-03-18 07:52:53
我正在制作一个网站，我添加了一个页脚，其中有一个链接到我的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>
回答 5
Stack Overflow用户
回答已采纳
发布于 2019-03-18 08:08:51
我通常通过创建一个类来填充有问题的项来分隔类似的元素。向元素添加填充可以将它们隔开。您可以使用各种"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>
Stack Overflow用户
发布于 2019-03-18 07:58:46
您可以使用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.);
}Stack Overflow用户
发布于 2019-03-18 08:00:17
对于像这样的情况，我喜欢使用flexbox。在本例中，我为space-around添加了对齐选项，但还有更多选项。有关更多信息，请参阅https://www.w3schools.com/css/css3：
.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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55213119
复制相关文章
相似问题