CSS 即使我做到了，也没有将项目右对齐

Question

我正在尝试制作一个网站，但是当我想在 div-header-gradient class 左侧制作文本 'Axxon' 时而 a href 位置在 header 的右边，它不起作用。这是我的代码。

.div-header-gradient {
    display: block;
    background: linear-gradient(#7700ff, #953bff);
    height: 100px;
    width: 100%;
    margin-left: 0px;
    overflow: hidden;
    animation: animheader;
    animation-duration: 1.5s;
}

.div-header-right {
    height: 100px;
    width: 100%;
    display: flex;
    overflow: hidden;
    position: relative;
    animation: animheader;
    animation-duration: 1.5s;
}

.href-right-header-buttons {
    position: fixed;
    color: #fff;
    font-size: 26px;
    letter-spacing: 2px;
    padding-top: 34px;
    padding-bottom: 34px;
    padding-left: 12px;
    padding-right: 12px;
    overflow: hidden;
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    margin-right: 0px;
}

<div class="div-header-gradient" style="z-index: 1000;">
        <p class="text-header-title-white" style="z-index: 1000;">
            Axxon
        </p>

        <div class="div-header-right">
            <a href="#" class="href-right-header-buttons">
                Invite Bot
            </a>
        </div>
    </div>

Answer 1

您已经设置了相对位置，但是您还没有设置您想要的相对位置，请尝试将 right:0; 添加到 CSS 规则中。

例如，要设置右侧元素，.div-header-right class 添加了 right:0;，以使内容与右侧对齐，偏移量为 0。

但是这个 class 你有一个锚标记，由于一些奇怪的原因它是 position:fixed 所以你不需要移动父元素你只需要移动 fixed 锚元素通过设置right:0; 也在这里。我还添加了 top:0;，因此锚标记的内容固定在该元素的右上角。

.div-header-gradient {
    display: block;
    background: linear-gradient(#7700ff, #953bff);
    height: 100px;
    width: 100%;
    margin-left: 0px;
    overflow: hidden;
    animation: animheader;
    animation-duration: 1.5s;
}

.div-header-right {
    height: 100px;
    width: 100%;
    display: flex;
    overflow: hidden;
    position: relative;
    animation: animheader;
    animation-duration: 1.5s;
}

.href-right-header-buttons {
    position: fixed;
    color: #fff;
    font-size: 26px;
    letter-spacing: 2px;
    padding-top: 34px;
    padding-bottom: 34px;
    padding-left: 12px;
    padding-right: 12px;
    overflow: hidden;
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    margin-right: 0px;
    right: 0; /* Add this line to push the element to the Right Hand Side */
    top:0; /* Add this line to push the element to the Top */
}

<div class="div-header-gradient" style="z-index: 1000;">
        <p class="text-header-title-white" style="z-index: 1000;">
            Axxon
        </p>

        <div class="div-header-right">
            <a href="#" class="href-right-header-buttons">
                Invite Bot
            </a>
        </div>
    </div>

CSS 即使我做到了，也没有将项目右对齐

CSS not aligning items to the right even though I made it to

html

css

positioning