Text kann nicht automatisch ausgerichtet werden

Question

Ich versuche, den Text automatisch so auszurichten, dass bei arabischen Texten der Text rechts beginnt und bei englischen Texten links. Nach einer Suche im Internet habe ich herausgefunden, dass ich dir="auto" ，并在 CSS 文件中使用 text-align: auto; im Tag verwenden muss. Ich habe das h1 标签，但没有使用 a-Tag verwendet.

代码：

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

Ich weiß nicht, was ich hier übersehe, oder es funktioniert einfach nicht, weil ich eine Karte verwende! Etwas Hilfe wäre sehr dankbar.

Answer 1

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

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

      
{title}
      

        {Links.map((link) => (
          

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

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

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

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