Question

我的索引页面上有一个链接：

<div class="content">
    <a class="buy" href="buy.html">Buy</a> 
</div>

我想将它与我页面的右侧对齐，我试过了：

a.buy{
  color: #2da1c1;
  font-size: small;
  text-decoration: none;
  left: 252px;
  float: left;

}
a.buy:hover
{
color: #f90;
text-decoration: underline;
left: 252px;
float: left;                 
}

但它仍位于左侧。（我已将我的CSS文件包含在我的index.html中，并且CSS文件已对页面上的其他元素生效）

Answer 1

尝试float: right：

a.buy {
    color: #2da1c1;
    font-size: small;
    text-decoration: none;
    float: right;
}
a.buy:hover
{
    color: #f90;
    text-decoration: underline;         
}

另一种方式是：

.content {
    position: relative
}
a.buy {
    color: #2da1c1;
    font-size: small;
    text-decoration: none;
    position: absolute;
    right: 0;
}
a.buy:hover
{
    color: #f90;
    text-decoration: underline;         
}

Answer 2

（1）您对示例代码有float: left; （2）也许如果你将float: right;添加到div中它会有帮助吗？

Answer 3

尝试以下方法：

a.buy{
  color: #2da1c1;
  font-size: small;
  text-decoration: none;
  float: right;

}
a.buy:hover
{
color: #f90;
text-decoration: underline;
}

Answer 4

您也可以尝试：

.content
{
    text-align: right;
}

Answer 5

如果您不想使用float: right，您可以将链接的显示属性更改为block，因为链接默认为inline：

a.buy {
    ...
    text-align: right;
    display: block;
}

你也可以使用弹性盒：

a.buy {
    ...
    display: flex;
    justify-content: flex-end;
}

CSS新手：如何将我的链接与页面右侧对齐？

5 个答案: