無法自動對齊文字

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
}

就您而言，最接近的流內容 給出 achor 元素文字方向的元素將是 <ul>。
這意味著將 dir="auto" 放在 <ul> 上也可以工作，您不需要 <div> 包裝器。但是，使用包裝器，您不必在兩個地方指定它。

附註：正如有人在評論中指出的那樣， <h1> 標籤是 <ul> 標籤的無效子標籤。