Tidak dapat menjajarkan teks secara automatik

Question

Saya cuba menjajarkan teks secara automatik supaya apabila teks dalam bahasa Arab teks bermula dari kanan dan jika teks dalam bahasa Inggeris maka teks bermula dari kiri. Selepas mencari di internet saya mendapati bahawa saya perlu menggunakan dir="auto" ，并在 CSS 文件中使用 text-align: auto; dalam tag. Saya menggunakan tag 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; 
}

Saya tidak tahu apa yang saya hilang di sini atau ia tidak berfungsi kerana saya menggunakan peta! Sedikit bantuan akan sangat dihargai.

Answer 1

Jika anda memberikan <div dir="auto"> 包装器，则其中的所有内容都将具有 auto arahan teks:

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

      
{title}
      

        {Links.map((link) => (
          

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

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

Dalam kes anda, elemen kandungan aliran yang paling hampir diberikan arah teks elemen penambat ialah <ul>.
Ini bermakna meletakkan dir="auto" pada dir="auto" 放在 <ul> 上也可以工作，您不需要 <div> juga akan berfungsi, anda tidak memerlukan pembalut <div>. Walau bagaimanapun, menggunakan pembungkus anda tidak perlu menentukannya di dua tempat.

Nota sampingan: Seperti yang ditunjukkan oleh seseorang dalam ulasan, teg <h1> ialah subteg yang tidak sah bagi teg <h1> 标签是 <ul>.