レスポンシブデザイン作成において、ul、liのリストを使うことで、html,cssのコードを整理しているのですが、
ul,liを多用しているせいか、ul,liを複雑に配置してしまったせいか、うまく機能しません。
下のHTMLを見てもらえばわかると思いますが、<li>の中に<div>が格納され、その<div>の中に、ul,liがあります。
そのためなのか、
.socialBox li{
border:none;
list-style:none;
display:inline-block;
}
と入力しても、Facebook,Twitter,Line,Instagramのマークが横並びになりません。
リストの横並びについては、このサイトを参考にしました。URL
質問
・リストの中に、divタグや新たなリストを格納することは、良くないのでしょうか?
もし、良くなければ、代替策を教えていただきたいです。
・なぜ4つのマークが横並びにならないのでしょうか?
大変恐縮ではございますが、この問題がお分かりになる方いらっしゃいましたら、教えていただけると幸いです。
よろしくお願いします。
HTML
<div class= "header-dash"> <ul> <li><a href="#"><img src="box img/header/logo.gif" class="logo" alt=""></a></li> <li><a href="#"><img src="box img/header/header-1.gif" class="header-1" alt=""></a></li> <li><a href="#"><img src="box img/header/header-2.gif" class="header-2" alt=""></a></li> <li><a href="#"><img src="box img/header/header-3.gif" class="header-3" alt=""></a></li> <li><a href="#"><img src="box img/header/header-4.gif" class="header-4" alt=""></a></li> <li> <div class="socialBox"> <ul> <li><a href=""><img src="box img/box social/facebook.gif" width="32" height="32" alt="LINE"></a></li> <li><a href=""><img src="box img/box social/Instagram.gif" width="32" height="32" alt="Instagram"></a></li> <li><a href=""><img src="box img/box social/line.gif" width="32" height="32" alt="Facebook"></a></li> <li><a href=""><img src="box img/box social/twitter.gif" width="32" height="32" alt="Twitter"></a></li> </ul> </div>
CSS
.socialBox{ margin-top:20px; border:none; } .socialBox li{ border:none; list-style:none; display:inline-block; } .socialBox ul li{ border:none; } .header-dash{ width:100%; background-color:#7FFFD4; margin:0 auto; list-style:none; } .header-dash ul li{ border-bottom:0.5px solid rgb(91, 148, 148); } .header-dash ul li{ list-style:none; text-align:center; margin:0 auto; display:block; } .header-dash ul { width:100%; text-align:center; margin:0 auto; padding:0; list-style:none; } .header-dash ul li{ list-style:none; }
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/24 10:12