0
パディングトップ:5pxを.nav-listクラスに追加すると、なぜこれが.social-listのパディングトップにも影響しますか?どのように避けることができますか?私は.nav-listのためにパディングトップを欲しいだけです。div内の他のクラスのパディングトップの影響
html, body, ul, li, h1, h2, h3, h4, h5, h6, img, p {
\t margin:0;
\t padding:0;
\t color:#777;
\t font-family:Arial, Helvetica, sans-serif;
}
.container {
\t max-width: 900px;
\t margin: 0 auto;
}
body {
\t font-size:14px;
\t letter-spacing: 0.2px;
}
/* --main nav--*/
nav {
\t background-color: #dadada;
\t height:40px;
}
.nav-list, .social-list {
\t list-style: none;
}
.nav-list li a {
\t color:white;
\t text-decoration: none;
}
.nav-list li, .social-list li {
\t float:left;;
}
.social-list {float:right;}
.nav-list {
padding-top:10px;
}
<nav>
\t \t <div class="container">
\t \t \t <ul class="nav-list">
\t \t \t \t <li><a href="#">Home</a></li>
\t \t \t \t <li><a href="#">Home</a></li>
\t \t \t \t <li><a href="#">Home</a></li>
\t \t \t \t <li><a href="#">Home</a></li>
\t \t \t </ul>
\t \t \t <ul class="social-list">
\t \t \t \t <li><a href="#"><img src="images/youtube.png"></a></li>
\t \t \t \t <li><a href="#"><img src="images/youtube.png"></a></li>
\t \t \t \t <li><a href="#"><img src="images/youtube.png"></a></li>
\t \t </div>
\t </nav>
please see code at row 38 in css(jsFiddle)
あなただけのnav-リストを必要とする{:;パディング:フロート12ピクセル:左;}このような –
** "jsfiddle.netへのリンクは、コードを添付しなければならない" **という意味ではありませんリンクをコードとしてフォーマットする必要があります。それはあなた自身が質問の中にコーズを入れる必要があることを意味します。スタックオーバーフローはあなたの個人用デバッガではありません。私たちは、将来の人々を助ける良いQ&Aのリポジトリを構築しようとしています。あなたの質問に関連するコードがないと、将来的にはそれほど役に立たなくなります(そしてそのリンクはある時点で消滅し、無駄になります)。 – Oriol