时间戳

首页 > 解决方案 > 即使我做到了，CSS也没有将项目向右对齐

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

问题描述

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

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

标签： htmlcsspositioning

解决方案

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

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

但是这个类你有一个锚标签，由于某种奇怪的原因position:fixed，你不需要移动父元素，你只需要fixed通过在这里设置 on 来移动锚元素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>

推荐阅读