html - CSS 中的对齐不适用于另一个 HTML 页面的按钮

Question

这就是我所说的按钮:

    <div class="registerButton">
        <a href="register/register.html"><button id="registerButton">Register here!</button></a>
    </div>

我后来添加了这个类，因为我认为问题是 id 只有按钮而没有链接。我已经尝试了所有可能的对齐选项。 alignment、align-content 、align-self 等。但这不是问题所在。我的按钮仍然没有对齐到右边。这是我的 CSS:

#registerButton {
    color: white;
    cursor: pointer;
    box-shadow: 1px 1px cadetblue;
    border-radius: 2px;
    background-color: orange;
    border-style: none;
    transition: background-color 0.2s ease-out, border-radius 0.2s ease-out, box-shadow 0.2s ease-out;
}

#registerButton:hover {
    background-color: darkorange;
    box-shadow: 2px 2px cadetblue;
    border-radius: 5px;
}

.registerButton {
    alignment: right;
    align-content: right;
    align-items: right;
    align-self: right;
    text-align-all: right;
    horiz-align: right;
    -moz-box-align: end;
}

看起来有点乱，但是看看这个你就能明白我的意思了。每次对齐都不适合我。我已经用 id 和 class 试过了。有人知道我做错了什么吗？

在写这篇文章时，我尝试了 div 标签中的 align 属性。这行得通，但为什么它在 CSS 文件中不起作用？

Answer 1

有很多方法可以做到这一点。这是一个使用 flexbox 的简单解决方案:

.registerButton {
  display: flex;
  justify-content: flex-end;
}

仅供引用