如何实现两个HTML链接同行显示，一个居左一个居右？

）包裹两个链接，通过Flex布局轻松实现左右对齐且同一行显示：

<div style="display: flex; justify-content: space-between;">
  <a href="example">Previous Page</a>
  <a href="example">Next Page</a>
</div>

这个方法的优势是代码简洁，布局逻辑清晰，justify-content: space-between会自动让两个链接分别靠向容器的左右两端，完美适配各种宽度的容器。

方法2：使用浮动布局 #

如果不想用Flex，也可以通过float属性让链接左右浮动，同时给父元素清除浮动避免布局混乱：

<p style="overflow: hidden;">
  <a href="example" style="float: left;">Previous Page</a>
  <a href="example" style="float: right;">Next Page</a>
</p>

这里的overflow: hidden是用来清除浮动的，确保父元素能正确包裹住两个浮动的链接。

方法3：替换块级元素为行内元素 #

直接把原来的

标签换成（行内元素），这样两个链接就会在同一行显示，再通过文本对齐属性调整位置：

<span style="float: left;"><a href="example">Previous Page</a></span>
<span style="float: right;"><a href="example">Next Page</a></span>

不过这种方法需要依赖浮动来实现左右对齐，灵活性不如Flex布局。

总结一下：核心就是去掉导致换行的块级元素（

），或者通过CSS布局属性让它们在同一行排列。选一个你觉得最容易理解的方法用在作业里就好啦！

内容的提问来源于stack exchange，提问作者J. Connolly