![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
◆html◆
<div class="footer">
<div class="footer-logo">Progate</div>
<ul>
<li>会社概要</li>
<li>採用</li>
<li>お問い合わせ</li>
</ul>
</div>
◆CSS◆
.footer {
height: 120px;
background-color: #2f5167;
color: #fff;
padding: 40px;
}
.footer-logo {
float: left;
font-size: 32px;
}
.footer li {
float: right;
}
footer-logoを左側に、liの3つを右側に縦に3つ並ぶようにしたいのですが、これだとliが右側に横並びになってしまします。なぜでしょうか。
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.3
- 回答日時:
htmlに記述されているliすべてにfloat:right;が適用されるからです。
liの次のliにも、その次のliにもすべてfloat:right;が効くんですよ。
ですからliが右寄せになって、次のliも右寄せにされて、さらに右寄せになる、ということが繰り返されるわけです。
liじゃなくて、その上のかたまりであるulをfloat指定することで、liのかたちはいつもと同じように見せてくれることになります。
ただお書きになっている方法でのレイアウトは今主流ではなく、display:flex;を使うほうが多いんじゃないかなと思います。
floatはすごく昔から利用されてきた、ある意味ハック的な方法なんですが、clearの入れ方で悩むケースが多いと思いますので、使わなくなっているんじゃないでしょうか。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・「I love you」 をかっこよく翻訳してみてください
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・昔のあなたへのアドバイス
- ・かっこよく答えてください!!
- ・あなたが好きな本屋さんを教えてください
- ・スタッフと宿泊客が全員斜め上を行くホテルのレビュー
- ・【大喜利】【投稿~8/27】 こんなガソリンスタンド二度と来るか!なぜそう思った?
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・【お題】動物のキャッチフレーズ
- ・【お題】甲子園での思い出の残し方
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・「それ、メッセージ花火でわざわざ伝えること?」
- ・自分用のお土産
- ・人生で一番お金がなかったとき
- ・一番好きなみそ汁の具材は?
- ・泣きながら食べたご飯の思い出
- ・ちょっと先の未来クイズ第1問
- ・ゴリラ向け動画サイト「ウホウホ動画」にありがちなこと
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
サイドメニューのロールオーバ...
-
リストマーカーをボックス内に...
-
スマホの実機でレイアウトが崩...
-
レスポンシブWebデザインでリン...
-
html/cssの、navを2段にする...
-
テーブル内のプルダウンの下に...
-
CSS li float 2列組み
-
html <ul></ul>の並びで一行空...
-
<li>で改行する横並びのメニュー
-
リストの数字のフォントサイズ...
-
li 長さ指定
-
CSS リスト 外枠から文字と画...
-
HTMLもしくはCSSのULでリンクを...
-
リストで行間を指定したい
-
divタグ内のコンテンツが重なっ...
-
リセットCSSについて
-
HTMLのUL,LIに行番号を付ける
-
CSS:liで作成したメニュー...
-
写真の下の複数行説明文
-
初心者です。エラー表示をなく...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
html/cssの、navを2段にする...
-
リストマーカーをボックス内に...
-
リストの数字のフォントサイズ...
-
<ul><li></li></ul>にするメリ...
-
ulタグやliタグの中でbrタグ...
-
レスポンシブWebデザインでリン...
-
<ul>~</ul>が二つ続くと間に改...
-
HTML5のfooterに見出しを付けて...
-
htmlの<ol>タグで、数字などを...
-
ulとliで囲った文字の一部を変...
-
番号付きリスト(<Ol><Li>・・...
-
HTMLで組織図を作成する方法
-
複数行にまたがる括弧を表示し...
-
liタグの中に<p>タグやら<dl>を...
-
divタグ内のコンテンツが重なっ...
-
display:table;を多段表示させたい
-
<table>の高さ固定。情報増加時...
-
html <ul></ul>の並びで一行空...
-
【至急】ul li 行間調整ができ...
-
テーブル内のプルダウンの下に...
おすすめ情報