Impossible d'aligner automatiquement le texte

Question

J'essaie d'aligner automatiquement le texte de sorte que lorsque le texte est en arabe, le texte commence par la droite et si le texte est en anglais, le texte commence par la gauche. Après avoir cherché sur Internet, j'ai découvert que je devais utiliser dir="auto" ，并在 CSS 文件中使用 text-align: auto; dans le tag. J'ai utilisé la balise 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; 
}

Je ne sais pas ce qui me manque ici ou ça ne fonctionne tout simplement pas parce que j'utilise une carte ! Une aide serait grandement appréciée.

Answer 1

Si vous fournissez <div dir="auto"> 包装器，则其中的所有内容都将具有 auto une direction textuelle :

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

      
{title}
      

        {Links.map((link) => (
          

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

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

Dans votre cas, l'élément flow content< /a> le plus proche étant donné la direction du texte de l'élément acor serait <ul>.
Cela signifie que mettre dir="auto" sur dir="auto" 放在 <ul> 上也可以工作，您不需要 <div> fonctionnera également, vous n'avez pas besoin du wrapper <div>. Cependant, en utilisant un wrapper, vous n'avez pas besoin de le spécifier à deux endroits.

Remarque : comme quelqu'un l'a souligné dans les commentaires, la balise <h1> est une sous-balise invalide de la balise <h1> 标签是 <ul>.