トースト UI ホームページに似たナビゲーション バーを作成する

Question

私のインスピレーションの源

次のようなナビゲーション バーを作成したいと考えています。

トースト UI ホームページ

私が何をしたのか

これを達成するために、できる限り再現するように努めます。

次のメッセージが表示されます。

＃＃＃私が欲しいものは＃＃＃

次のようなものが欲しいです (これらは画像編集で作成されました):

オプション 1: 中央揃え

オプション 2: 左揃え

リンク リストの位置を、それを含むリンク グループの位置に応じて動的にしたいと考えています。 私がやったのは左揃えだけでした。

つまり、UI を改善するために、リンク リストをそれを含むリンク グループの直下に配置したいと考えています。

コードとボックスを編集してこれを取得する方法を教えていただけますか?

Answer 1

link-listのpaddingLeftとlink-groupのx座標を設定します。

1. GetElementByIdを使用する

リーリー

2. link-list をコンポーネントに分割し、linkGroupId を props として受け取ります。 そして、link-listのpaddingLeftとlink-groupのx座標
を設定します。

リーリー

3. リンクグループのIDを設定します
リーリー

その後、

option2を取得することができました。

「LinkList」がオーバーフローした場合は、「LinkList」が「.link-list-box」を満たすまでラップしないことが最善です。そうすれば、左側のパディングは自然に減少します。でもどうすればいいのか分かりません。