如何将保留部分放在页脚的左侧，将页脚放在页脚的右侧，并在CSS上的链接之间添加空格？不使用flexbox
HTML：
<footer>
<div id="reserved">All rights reserved</div>
<nav id="footer">
<a href="">Home</a>
<a href="">About</a>
<a href="">Opportunities</a>
<a href="">Terms</a>
</nav>
</footer>
谢谢！
使用float将提供您想要的。如果您不想flexbox
#reserved {
float: left;
}
#footer {
float: right;
}
#footer a {
padding: 0 15px;
}
footer::after {
display: block;
content: "";
clear: both;
}<footer>
<div id="reserved">All rights reserved</div>
<nav id="footer">
<a href="">Home</a>
<a href="">About</a>
<a href="">Opportunities</a>
<a href="">Terms</a>
</nav>
</footer>,
对于这样的布局，浮点数可以派上用场。 定义#reserved向左浮动，并#footer向右浮动。这会将两个子元素放在相对的两端。 您只需在锚标记中添加所需边距即可：
#reserved {
float:left;
}
#footer {
float:right;
}
#footer>a {
margin-right: 10px;
}<footer>
<div id="reserved">All rights reserved</div>
<nav id="footer">
<a href="">Home</a>
<a href="">About</a>
<a href="">Opportunities</a>
<a href="">Terms</a>
</nav>
</footer>,
您尚未指定链接的显示方式；如果希望它们向下显示，则使用块，否则，除了显示id inline-block并向导航链接添加一些填充之外，您实际上不需要添加太多代码。
下面的代码段显示了向下显示菜单的示例。我添加了vertical-align:top，以使“保留所有权利”与顶部菜单链接保持一致（而不是显示在菜单底部。请根据需要进行调整。
#reserved,nav {
display: inline-block;
position: absolute;
vertical-align: top;
}
#reserved {
margin-top: 10px;
margin-left: 5%;
}
nav {
left: 50%;
}
nav a {
display: block;
padding: 10px;
text-decoration: none;
}<footer>
<div id="reserved">All rights reserved</div>
<nav id="footer">
<a href="">Home</a>
<a href="">About</a>
<a href="">Opportunities</a>
<a href="">Terms</a>
</nav>
</footer>,
只需在页脚上放置样式
#footer{
padding: 0 10px;
}
在此示例中，它将在左侧和右侧都留出10px的空间。
但是，如果您希望#reserved位于右侧，而#footer位于左侧，则将其都包含在具有css的div中
#wrapper{
display:flex;
}
#reserved{
flex: 1 1;
}
#footer{
flex: 1 1;
}
然后，执行以下操作：
<footer id="wrapper">
<div id="reserved">All rights reserved</div>
<nav id="footer">
<a href="">Home</a>
<a href="">About</a>
<a href="">Opportunities</a>
<a href="">Terms</a>
</nav>
</footer>