无法自动对齐文本

Question

我正在尝试自动对齐文本，当文本是阿拉伯语时，文本从右侧开始，如果文本是英语，则文本从左侧开始。在互联网上搜索后，我发现我必须在标签中使用

dir="auto"

，并在CSS文件中使用

text-align: auto;

。 我使用了

h1

标签，但没有使用

a

标签。

The code:

import "./item.css";

const Item = ({ Links, title }) => {
  return (
    <ul>
      <h1 dir="auto" className="itemTitle">{title}</h1>
      {Links.map((link) => (
        <li key={link.name}>
          <a dir="auto" className="itemLinks"
            href={link.link}>
            {link.name}
          </a>
        </li>
      ))}
    </ul>
  );
};

export default Item;

The CSS file:

.itemTitle{
    margin-bottom: 1px;
    font-family: 'Tajawal', sans-serif;
    text-align: auto;
    font-size: 15px;
    font-weight: 700;
    color: gray;
}

.itemLinks{
    color: gray;
    font-family: 'Tajawal', sans-serif;
    text-align: auto;
    font-weight: 500;
    cursor: pointer;
    font-size: 14px;
    line-height: 20px; 
}

我不知道我在这里错过了什么，或者它只是不起作用，因为我正在使用地图！一些帮助将不胜感激。

Answer 1

如果您提供

<div dir="auto">

包装器，则其中的所有内容都将具有

auto

文本方向：

const Item = ({ Links, title }) => {
  return (
    <div dir="auto">
      <h1 className="itemTitle">{title}</h1>
      <ul>
        {Links.map((link) => (
          <li key={link.name}>
            <a className="itemLinks"
              href={link.link}>
              {link.name}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
};

[dir="auto"] > * {
  text-align: auto
}

在您的情况下，给出锚元素文本方向的最接近的flow content元素将是

<ul>

。
这意味着将

dir="auto"

放在

<ul>

上也可以，您不需要

<div>

包装器。但是，使用包装器，您不必在两个地方指定它。

旁注：正如有人在评论中指出的那样，

<h1>

标签是

<ul>

标签的无效子代。