テキストを自動的に配置できません

Question

テキストがアラビア語の場合はテキストが右から始まり、テキストが英語の場合は左から始まるようにテキストを自動的に配置しようとしています。インターネットで検索した結果、タグで dir="auto" を使用し、CSS ファイルで text-align: auto; を使用する必要があることがわかりました。 h1 タグを使用しましたが、a タグは使用しませんでした。

コード:

リーリー

CSS ファイル:

リーリー

ここで何が足りないのかわかりません。あるいは、地図を使用しているために機能しないのです。助けていただければ幸いです。

Answer 1

<div dir="auto"> ラッパーを指定すると、その中にあるものはすべて auto テキスト方向になります:

const アイテム = ({ リンク, タイトル }) => {
  戻る （
    

      ＃＃＃{タイトル}＃＃＃
      

        {Links.map((リンク) => (
          
            

              {リンク.名前}
            

          
        ))}
      
    
  );
};

[dir="auto"] > * { テキスト整列: 自動 }

あなたの場合、achor 要素のテキスト方向を考慮すると、最も近い 

flow content

要素は <ul> になります。 これは、dir="auto"
を <ul> に置くことも機能し、<div> ラッパーは必要ないことを意味します。ただし、ラッパーを使用すると、2 か所で指定する必要がなくなります。 補足: コメントで誰かが指摘したように、

<h1>

タグは <ul> タグの無効なサブタグです。