填充顶部影响 div 中的其他 class

Question

如果我在 .nav-list class 上添加 padding-top: 5px，为什么这也会影响 .social-list 上的 padding-top？以及如何避免？我只想要 .nav-list 的 padding-top。

html, body, ul, li, h1, h2, h3, h4, h5, h6, img, p {

 margin:0;
 padding:0;
 color:#777;
 font-family:Arial, Helvetica, sans-serif;
}

.container {
 max-width: 900px;
 margin: 0 auto;

}

body {
 font-size:14px;
 letter-spacing: 0.2px;
}
/* --main nav--*/
nav {
 background-color: #dadada;
 height:40px;
}
.nav-list, .social-list {
 list-style: none;
}

.nav-list li a {
 color:white;
 text-decoration: none;

}
.nav-list li, .social-list li {
 float:left;;
}
.social-list {float:right;}
.nav-list {
  padding-top:10px;
}

<nav>
  <div class="container">
   <ul class="nav-list">
    <li><a href="#">Home</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">Home</a></li>
   </ul>
   <ul class="social-list">
    <li><a href="#"><img src="images/youtube.png"></a></li>
    <li><a href="#"><img src="images/youtube.png"></a></li>
    <li><a href="#"><img src="images/youtube.png"></a></li>
  </div>
 </nav>

please see code at row 38 in css(jsFiddle)

Answer 1

您需要将 float:left 应用到 .nav-list，然后向其添加填充。像这样：

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

Demo

填充顶部影响 div 中的其他 class

Padding-top affect on other class in div

html

css

padding