将列表项对齐一行答案

【问题标题】：align list items in one line将列表项对齐一行
【发布时间】：2021-12-09 23:26:39
【问题描述】：

我的项目中有以下代码和样式：我想调整文本和跨度样式

我的默认代码图片如下：

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

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

     <div>
       <ul>
          <li>
            English<span></span>
          </li>
          <li>
            Spanish<span></span>
          </li>
          <li>
            French<span></span>
          </li>
          <li>
            Russian<span></span>
          </li>
          <li>
            Arabic<span></span>
          </li>
          <li>
            Japanese<span></span>
          </li>
          <li>
            indian<span></span>
          </li>
        </ul>
      </div>

我想让我的列表像这张图片：

我怎样才能像上图一样对齐它？（我的身体方向是rtl）

【问题讨论】：

您不认为您也需要发布您的CSS 代码吗？请把它放在snippet。
我给你做了一个sn-p。请添加相关的 CSS 和 RTL 属性
@mplungjan 我加了
请同时添加将在屏幕上显示 LI 的任何内容

标签： html css flexbox styles

【解决方案1】：

将li { justify-content: space-between; } 更改为li { justify-content: flex-end; }

body {
  direction: rtl
}

li {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
}

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

<div>
  <ul>
    <li>
      English<span></span>
    </li>
    <li>
      Spanish<span></span>
    </li>
    <li>
      French<span></span>
    </li>
    <li>
      Russian<span></span>
    </li>
    <li>
      Arabic<span></span>
    </li>
    <li>
      Japanese<span></span>
    </li>
    <li>
      indian<span></span>
    </li>
  </ul>
</div>

【讨论】：