我正在尝试自动对齐文本，当文本是阿拉伯语时，文本从右侧开始，如果文本是英语，则文本从左侧开始。搜索互联网后，我发现我必须在标签中使用 dir="auto" ，并在 CSS 文件中使用 text-align: auto; 。 我使用了 h1 标签，但没有使用 a 标签。

代码：

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;

CSS文件：

.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; 
}

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