Question

我正在尝试将文字及其链接对齐在我网页页脚的左侧和右侧。问题是我想要在右侧的文本落在左侧意味着两个文本显示在左侧。我希望它们在同一条线上，但一条在左侧，一条在右侧。任何帮助，将不胜感激！谢谢你的帮助！

以下是代码 -

CSS -

#footer{
display: none;
width: 100%;
height: 28px;
position: absolute;
bottom: 0px;
padding: 13px 7px 0px 17px;
font-size: 13px;
color: #848484;
background-color: #F2F2F2;
border-top: 1px solid #E6E6E6;
}
.designedby{
        text-align: left;
}
.copyright{
       text-align: right;
}

PHP / HTML -

<div id="footer">Designed By
<class="designedby"><a href="http://www.techxyz.co">techXYZ.co</a>
<class="copyright"><a href="http://www.techxyz.co/techxyzmedia.html">copyright</a></div>

**结果页脚的屏幕截图 - **

click to view footer screenshot

Answer 1

这是因为，当您使用text-align时，它会将该元素内部的文本与该元素的左侧或右侧对齐。因此，如果您的文字说10px宽，且该元素为10px宽，则即使您将text-align设置为{，它仍会显示在屏幕的左侧{1}}。要解决此问题，只需添加

即可

right

到position: absolute; right: 0;的CSS。

.copyright

#footer{
//display: none;
width: 100%;
height: 28px;
position: absolute;
bottom: 0px;
padding: 13px 7px 0px 17px;
font-size: 13px;
color: #848484;
background-color: #F2F2F2;
border-top: 1px solid #E6E6E6;
}
.designedby{
        text-align: left;
}
.copyright{
       position: absolute;
       right:0;
       margin-right: 10px;
}

Answer 2

更容易做的就是执行以下操作：

.container{
width: 100vw;
height: 28px;
position: absolute;
bottom: 0px;
font-size: 13px;
color: #848484;
background-color: #F2F2F2;
border-top: 1px solid #E6E6E6;
/*NEW*/
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0 10px;
}

<div class="container">
  <div id="footer">Designed By
    <a class="designedby" href="http://www.techxyz.co">techXYZ.co</a>
  </div>
  <div class="copyright">
    <a href="http://www.techxyz.co/techxyzmedia.html">copyright</a>
  </div>
</div>

您所做的只是创建一个容器并使用flexbox以您希望的方式对齐子元素。

justify-content: space-between;可以分隔你所拥有的页脚的两个部分。

如何在网页的右侧和左侧对齐页脚文本？

2 个答案: