2

有没有办法将dir标签应用于<li>元素而不弄乱列表指示器？直观地说，它们应该都在同一侧，并且<li>其他宽度的 LTR 文档中的 RTL 元素应该要么对齐到左侧，如果它只是一个未满的行，或者从右侧对齐。为什么反向的方向指标最终还是在边缘？

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>

4

2 回答 2

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>
于 2019-08-30T05:06:50.420 回答
0

“为什么反向的方向指标最终还是在边缘范围内呢？ ”

因为您已将 amax-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>

于 2019-08-30T05:10:47.703 回答