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来做到这一点：

* master
* feature1
* feature2

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：

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

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 =“ ...”>中断列表指示符

2 个答案: