如何根据所选语言将导航栏项目对齐到对应方向末端

• 现有承载导航列表的div容器，需要将容器内最后一个li元素定位到div的末端位置
• 页面支持阿拉伯语、英语双语切换，会根据用户选择动态修改页面dir（文字排版方向）属性，定位逻辑需要自动适配排版方向，无需额外判断语言版本

不要使用固定方向的margin-left/margin-right或者float属性，这类写死物理方向的属性在rtl（阿拉伯语从右向左排版）模式下会出现定位错位。使用CSS逻辑属性可以自动跟随dir属性切换方向，纯CSS实现双语适配，不需要额外写JS逻辑。

• 调整原有导航列表样式，将列表设置为全宽flex布局
• 移除ul标签上原有固定方向的mr-auto类，避免固定margin干扰布局
• 给最后一个导航项设置行首方向的自动外边距，自动将元素推到当前排版方向的行尾
• （可选优化）将原写死的右侧分隔边框替换为逻辑属性边框，适配阿语模式下的分隔线位置

新增/调整CSS代码 #

#navbarSupportedContent .navbar-nav {
  display: flex;
  width: 100%;
}

/* 最后一个导航项自动靠齐容器行尾，适配ltr/rtl双方向 */
#navbarSupportedContent .navbar-nav .nav-item:last-child {
  margin-inline-start: auto;
}

/* 可选：修复分隔边框方向，永远在导航项的行尾侧 */
#navbarSupportedContent .nav-item {
  border-right: none;
  border-inline-end: 1px solid #01154D;
}

HTML修改点 #

找到原有ul标签：

<ul class="navbar-nav mr-auto" style="/* float:inherit; */">

删除其中的mr-auto类，修改为：

<ul class="navbar-nav" style="/* float:inherit; */">

其余HTML结构不需要改动。

• 英语dir="ltr"（从左到右排版）模式下，margin-inline-start: auto等价于margin-left: auto，最后一个li自动靠齐容器最右端
• 阿拉伯语dir="rtl"（从右到左排版）模式下，margin-inline-start: auto等价于margin-right: auto，最后一个li自动靠齐容器最左端
• 分隔边框会自动跟随排版方向调整位置，不会出现方向错乱

内容的提问来源于stack exchange，提问作者Osama Al-far