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

我只想使用 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 文档

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

要将导航元素与屏幕右侧对齐，可以使用 CSS 的 justify-content 属性。

当前的代码使用 float 和 text-align ，这可能会导致布局问题。

请尝试以下修改后的 CSS 代码：

nav {
  display: flex;
  padding: 20px;
  font-family: Arial;
  background-color: #4E00A7;
  /* 使用 justify-content: flex-end; 将元素向右对齐 */
  justify-content: flex-end; 
}

nav li {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
  display: inline-block;
  /*  移除 float 和 margin-left: auto */ 
}

nav li a {
  color: white;
  /*  移除 float */ 
  text-decoration: none; 
  padding-left: 10px;
  padding-right: 10px;
}

/* 其他样式... */

通过将 justify-content 设置为 flex-end ，告诉 flex 容器将其子元素（导航链接）向右对齐。

解释：

• display: flex 将 nav 元素定义为 flex 容器。
• justify-content: flex-end 将 flex 容器中的子元素向右对齐。

希望这可以帮助解决问题！