<分区>
这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能在这里出现，但这个问题的解决方式不太可能帮助 future 的读者。
关闭 6 年前。
标签 css
我在设计页脚样式时遇到问题，需要一些指导。名称应该在左边，链接在右边。这些链接已经崩溃了，我想知道是否有更好的方法可以更有效地将它们对齐在一起。我尝试在这里使用 flexbox，但收效甚微。提前谢谢你的帮助。
/* footer styles*/
footer { margin-top:1em; display: block; border-top: solid 2px #456e6e;
margin-bottom: 1em; }
top {
float: right;
text-decoration:none;
color: #456e6e;
margin-top: -2.25em;
}
top:hover{
color:black;
}
footer a { text-decoration: none; color: #456e6e; }
footer a:hover{ color:black; }
wrapper {
min-height: 100vh;
}
/*NAV CSS*/
.tablet-info {
display: none;
} for small screen sizes
for larger screen sizes
.tablet-info {
display: inline-block;
float: right;
margin-top: -2em;
margin-right:.25em;
margin-left:.25em;
}
student-name {
margin-top: 1.8em;
}
.clearfix { content: ""; display: table; clear: both; }
} <div id="footer">
<footer class="clearfix">
<h3 id="student-name">Tracy Excell</h3>
<h3><a href="#home" id="top">Back To Top</a></h3>
<h3><a href="#home" class="tablet-info">Home</a></h3>
<h3><a href="#portfolio" class="tablet-info">Portfolio</a></h3>
<h3><a href="#contact" class="tablet-info">Contact</a></h3>
</footer>
</div>最佳答案
您可以使用更新的页脚布局并使用 flexbox，如下所示:
footer{
display: flex;
justify-content: space-between;
}
footer .nav{
display: flex;
}
.nav h3{
margin-left: 15px;
}<footer>
<h3 id="student-name">Tracy Excell</h3>
<div class="nav">
<h3><a href="#home" id="top">Back To Top</a></h3>
<h3><a href="#home" class="tablet-info">Home</a></h3>
<h3><a href="#portfolio" class="tablet-info">Portfolio</a></h3>
<h3><a href="#contact" class="tablet-info">Contact</a></h3>
</div>
</footer>关于css - 使用 CSS 进行页脚布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38558954/