RTL布局下如何实现列表项文本与span圆点元素单行对齐？

调整方案 #

你只需要对现有CSS做如下几处修改即可实现预期对齐效果：

1. 给外层div设置固定宽度，保证所有列表项宽度一致，宽度可根据实际展示的文字长度灵活调整
2. 重置ul的默认列表样式与内外边距，避免浏览器默认样式干扰
3. 将li的垂直对齐方式从baseline改为center，保证文字和灰色圆点垂直居中对齐

新增/修改的CSS代码：

/* 新增ul样式重置 */
ul {
  list-style: none;
  margin: 0;
  padding: 15px 20px;
}

div {
  /* 原有属性不变，新增宽度设置 */
  width: 180px;
}

li {
  /* 原有属性不变，修改align-items的值 */
  align-items: center;
}

修改后完整CSS代码：

body {
  direction: rtl
}
div {
  position: absolute;
  top: 30px;
  right: -100px;
  width: 180px;
  height: 300px;
  overflow-y: scroll;
  background-color: #fff;
  box-shadow: 1px 1px 5px rgb(0 0 0 / 10%);
  border-radius: 15px;
}
ul {
  list-style: none;
  margin: 0;
  padding: 15px 20px;
}
li {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

span {
  background-color: #eeeeee;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

调整后所有列表项的灰色圆点都会统一在左侧对齐，文字统一在右侧对齐，匹配你期望的效果。

内容的提问来源于stack exchange，提问作者Peter