2016-12-10 3 views
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)

+0

あなただけのnav-リストを必要とする{:;パディング:フロート12ピクセル:左;}このような –

+0

** "jsfiddle.netへのリンクは、コードを添付しなければならない" **という意味ではありませんリンクをコードとしてフォーマットする必要があります。それはあなた自身が質問の中にコーズを入れる必要があることを意味します。スタックオーバーフローはあなたの個人用デバッガではありません。私たちは、将来の人々を助ける良いQ&Aのリポジトリを構築しようとしています。あなたの質問に関連するコードがないと、将来的にはそれほど役に立たなくなります(そしてそのリンクはある時点で消滅し、無駄になります)。 – Oriol

答えて

-1

あなたは.nav-listfloat:leftを適用し、それにパディングを追加する必要があります。

.nav-list { 
    float: left; 
    padding-top: 5px; 
} 

Demo

関連する問題