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

【问题标题】：CSS not aligning items to the right even though I made it to即使我做到了，CSS也没有将项目向右对齐
【发布时间】：2021-01-10 06:37:02
【问题描述】：

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

.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>

【问题讨论】：

标签： html css positioning

【解决方案1】：

您已设置相对位置，但尚未设置该相对位置的位置，请尝试将 right:0; 添加到该 CSS 规则中。

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

但是这个类你有一个锚标记，由于某种奇怪的原因是position:fixed，所以你不需要移动父元素，你只需要通过在这里设置right:0;来移动fixed锚元素。我还添加了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>

【讨论】：

谢谢！我会在冷却后将其标记为正确。
@axquacode 谢谢，很高兴它有效。请参阅我对 CSS 的更新。干杯
谢谢！老实说，你是唯一一个真正以理解的方式向我解释的人。