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

Question

如果我在.nav-list类上添加padding-top：5px，为什么这会影响.social-list上的padding-top呢？它是如何避免的？我只想填充.nav-list填充顶部。

＆＃13;

＆＃13;

List<DataItem> list

＆＃13;

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;
}

＆＃13;

＆＃13;

＆＃13;

please see code at row 38 in css(jsFiddle)

Answer 1

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

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

Demo