<li dir="..."> 打破列表指标

Question

有没有办法将 dir 标签应用到 <li> 元素而不弄乱列表指示器？直觉上，它们应该都在同一侧，如果只有一条未满线，则其他范围的 LTR 文档中的 RTL <li> 元素应该向左对齐，或者从右边对齐。为什么反向方向指示器最终仍处于边缘位置？

ul {
  max-width: 15em;
  margin: auto;
}

<!DOCTYPE HTML>
<html>

<body>
  <ul dir="ltr" lang="en">
    <li>English</li>
    <li dir="rtl" lang="ar">العربية</li>
    <li>English</li>
  </ul>
  <ul dir="rtl" lang="ar">
    <li>العربية</li>
    <li dir="ltr" lang="en">English</li>
    <li>العربية</li>
  </ul>
</body>

</html>

Answer 1

这段代码完美无缺。您只需应用 css:

即可

<!DOCTYPE HTML>
<html>
<style type="text/css">
  ul {
    direction: rtl;
  max-width: 15em;
  margin: auto;
}
.ltr{
  direction : ltr;
}
.rtl{
  direction :  rtl;
}
</style>
<body>
  <ul class="ltr" lang="en">
    <li>English</li>
    <li   lang="ar">العربية</li>
    <li>English</li>
  </ul>
  <ul class="rtl"  lang="ar">
    <li>العربية</li>
    <li  lang="en">English</li>
    <li>العربية</li>
  </ul>
</body>

</html>

Answer 2

"为什么反向方向指示器最终仍停留在空白处？"

因为您已将 max-width:15em 应用到 ul。所以子列表项将占据父项的整个宽度并以这种方式结束。

"有没有办法将 dir 标签应用到 <li> 元素而不弄乱列表 指标？"

解决方法 1：

如果您不介意列表指示符的对齐不一致并需要它们遵循方向，请将 ul 设为 inline 元素。没有给出具体的宽度。

body {
  margin: 50px;
}

ul {
  display: inline-block;
  max-width: 15em;
  margin: auto;
}

<!DOCTYPE HTML>
<html>

<body>
  <ul dir="ltr" lang="en">
    <li>English</li>
    <li dir="rtl" lang="ar">العربية</li>
    <li>English</li>
  </ul>
  <br><br><br><br>
  <ul dir="rtl" lang="ar">
    <li>العربية</li>
    <li dir="ltr" lang="en">English</li>
    <li>العربية</li>
  </ul>
</body>

</html>

解决方法 2：

在ul中使用list-style-position: inside属性。属性将项目符号与文本对齐。

ul {
  max-width: 15em;
  margin: auto;
  list-style-position: inside;
}

<!DOCTYPE HTML>
<html>

<body>
  <ul dir="ltr" lang="en">
    <li>English</li>
    <li dir="rtl" lang="ar">العربية</li>
    <li>English</li>
  </ul>
  <br><br><br><br>
  <ul dir="rtl" lang="ar">
    <li>العربية</li>
    <li dir="ltr" lang="en">English</li>
    <li>العربية</li>
  </ul>
</body>

</html>

<li dir="..."> 打破列表指标

<li dir="..."> breaks list indicators

html

css

direction

html-lists