【実現したいこと】float:letf;をつけたliを中央に並べたいです。
追記【現状】flexboxで自己解決 →【他にも皆様が使われている方法があれば教えて頂きたいです】
下記はHTML,自己解決方法を記述しております。
HTML
1 <nav class="menu"> 2 <ul> 3 <li><i class="fa fa-caret-left fa-fw"></i>アイウエオ</li> 4 <li><i class="fa fa-caret-left fa-fw"></i>アイウエオ</li> 5 <li><i class="fa fa-caret-right fa-fw"></i>アイウエオ</li> 6 <li><i class="fa fa-caret-right fa-fw"></i>アイウエオ</li> 7 </ul> 8 </nav> 9 10 11 12
自己解決方法
CSS
1.menu { 2 display:flex !important; 3 align-items: center !important; 4 justify-content: center !important; 5 } 6
目を通して頂きありがとうございました!
提示のコードは、「liのfloat設定」は必須なのでしょうか?float外してulにflexがシンプルではないでしょうか?
yoshinavi 様 必須ではございません。私の知識が浅く、リストを横並びにするにはfloat:left;をかけなければという固定概念がありました。おっしゃる通りそちらの方がシンプルですね。ありがとうございます。
横から失礼します。ただ単にliを横並びにするだけの場合はliにdisplay:inline-blockでも可能ですよ。目的に合ったやり方、好みのやり方など色々やってみてください。ちなみに、liにfloatは並びが逆になるので個人的には好みではないです。そして応用性があるのでflexboxが好みです
akihiro3様 flexboxはやはり便利なのですね。まだまだ少し理解するためにFroggyという学習ゲームをしただけなので勉強を開始したいと思います。HTML&CSSから開始し現在Bootstrapを学んでいるのですがflexboxも早くやりたくなってきました!!体系的に学んでいかなければですね。有難いアドバイスありがとうございます!
「!important」は、普段は使用せず、コードが適用されない原因究明が出来ない場合に「最後の手段」で使用されることをオススメします。理由として「!important」には「!important」でしか取り消せないですし、使い過ぎると「カオス」状態に陥りやすくなるためです。
yoshinavi 様 お礼を申し上げるのが遅くなり申し訳ありません。 なるほど…本当の禁忌の最終手段として考えていた方がよろしいですね…。今回何をやっても解決できず、やけくそで使ってしまいました。m( _ _ )m 以後気をつけます!ありがとうございます。
回答1件
あなたの回答
tips
プレビュー