无法自动对齐文本

Question

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

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

Answer 1

如果您提供 <div dir="auto"> 包装器，则其中的所有内容都将具有 auto 文本方向：

const Item = ({ Links, title }) => {
  return (
    

      
{title}
      

        {Links.map((link) => (
          

            
              {link.name}
            
          
        ))}
      
    
  );
};

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

就您而言，最接近的流内容< /a> 给出 achor 元素文本方向的元素将是 <ul>。
这意味着将 dir="auto" 放在 <ul> 上也可以工作，您不需要 <div> 包装器。但是，使用包装器，您不必在两个地方指定它。

旁注：正如有人在评论中指出的那样， <h1> 标签是 <ul> 标签的无效子标签。