如何将导航元素与屏幕右侧对齐

Question

我想仅使用 CSS 将 UI 元素向右对齐。

这是我的 CSS 代码。

nav {
    display: flex;
    padding: 20px;
    font-family: Arial;
    background-color: #4E00A7;
    text-align: right;
    
}

nav li {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
    display: inline-block;

}
 nav li a {
    color: white;
    float: right;
    margin-left: auto;
    text-decoration: none; 
    padding-left: 10px;
    padding-right: 10px;
}


.roboto-bold-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.roboto-bold {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.roboto-medium {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.pull-right {
    float: right;
}

以及我当前 HTML 文档的屏幕截图
Html 文档渲染

我尝试过将其浮动到右侧，文本对齐它，希望它会向左移动。

Answer 1

尝试将

justify-content

规则中的

nav

设置为

flex-end

。

下面我刚刚获取了您的 CSS 并将

justify-content: flex-end

插入到

nav

。

nav {
    display: flex;
    padding: 20px;
    font-family: Arial;
    background-color: #4E00A7;
    text-align: right;
    justify-content: flex-end;
}

nav li {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
    display: inline-block;

}
 nav li a {
    color: white;
    float: right;
    margin-left: auto;
    text-decoration: none; 
    padding-left: 10px;
    padding-right: 10px;
}


.roboto-bold-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.roboto-bold {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.roboto-medium {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.pull-right {
    float: right;
}

<nav>
  <li><a>Logout</a></li>
  <li><a>Login</a></li>
  <li><a>Communities</a></li>
  <li><a>Home</a></li>

</nav>