Question

我希望我的导航栏跨越屏幕的整个宽度（导航栏左侧有一块白色）。我也希望标签居中。谁能帮我这个？我是这个的初学者所以请详细解释。我还想将我的徽标放在导航栏的左侧，有人知道如何放置它以及显示我的徽标的像素数，谢谢。

这是我的HTML代码。

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="main.css" rel="stylesheet">
<title>Connection InterFace</title>
<ul>
    <li><a href="#" class="active">Home</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>
</ul>
</head>

<body>
</body>

<footer>
</footer>

这是我的css。

body {
  background-color:white;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color:red;
}
li {
  float: left;
}
  li a {
  display: block;
  color: white;
  text-align: center;
  padding: 22px 24px;
  text-decoration: none;
}
  li a:hover {
  background-color:maroon;
}
ul {
  position:fixed;
  top:0;
  width:100%;
}
.active {
  background-color:black;

Answer 1

空间在那里因为浏览器有默认的边距和填充。所以你通过“CSS重置”删除填充。我只是展示了删除所有内容的填充和边距的基本方法。现在，您可以根据需要设置自己的自定义填充和边距。

我不知道您是否知道，但我想说浏览器附带默认的“用户代理”样式。例如，对于大多数浏览器，默认字体大小为16px，但您可以像填充和边距一样覆盖它。在你的情况下，我相信身体有8px的余量。

*{
  margin: 0;
  padding: 0;
}
body {
  background-color:white;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color:red;
}
li {
  float: left;

}
  li a {
  display: block;
  color: white;
  text-align: center;
  padding: 22px 24px;
  text-decoration: none;
}
  li a:hover {
  background-color:maroon;
}
ul {
  position:fixed;
  top:0;
  width:100%;
}
.active {
  background-color:black;
}
.logo{
	display: inline-block;
	width: 20%;
	background: orange;
	padding: 22px 24px;
}

<ul>
  <li class = "logo"><div >LOGO</div></li>
  <li><a href="#" class="active">Home</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
</ul>

这是一个围绕导航元素移动以通过玩li:nth-child(2) a{ margin-left: 50px ; }使其更加居中的演示..这不是最好的方法，但这是一种不改变HTML设置的好方法。

*{
	margin: 0;
	padding: 0;
}
body {
  background-color:white;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color:red;
}
li {
  float: left;

}
  li a {
  display: block;
  color: white;
  text-align: center;
  padding: 22px 24px;
  text-decoration: none;
}
  li a:hover {
  background-color:maroon;
}
li:nth-child(2) a{
	margin-left: 50px ;
}
ul {
  position:fixed;
  top:0;
  width:100%;
}
.active {
  background-color:black;
}
.logo{
	display: inline-block;
	width: 20%;
	background: orange;
	padding: 22px 24px;
}

<ul>
  <li class = "logo"><div >LOGO</div></li>
  <li><a href="#" class="active">Home</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
</ul>

我在下面添加了如何使用背景图像显示我喜欢的徽标图像，因为我们可以使用background-size: cover;帮助在地方显示图像。

*{
	margin: 0;
	padding: 0;
}
body {
  background-color:white;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color:red;
}
li {
  float: left;

}
  li a {
  display: block;
  color: white;
  text-align: center;
  padding: 22px 24px;
  text-decoration: none;
}
  li a:hover {
  background-color:maroon;
}
li:nth-child(2) a{
	margin-left: 50px ;
}
ul {
  position:fixed;
  top:0;
  width:100%;
}
.active {
  background-color:black;
}
.logo{
	/*display: inline-block;*/
	width: 20%;
	background: orange;
	/*padding: 22px 24px;*/
}
.logo div{
	background: url("http://placehold.it/100x100/ff66cc/ffffff&text=IMAGE") no-repeat center center ;
	background-size: cover;
	height: 65px;
}

<ul>
  <li class = "logo"><div></div></li>
  <li><a href="#" class="active">Home</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
</ul>

Answer 2

摆脱左角的空白你可以做边距，填充0

body {
  background-color:white;
  margin:0;
  padding:0;
}

http://codepen.io/anon/pen/grvpOE

在左侧添加徽标，通过根据图像的大小添加行高

li {
  float: left;
  line-height:7.2px;
}

http://codepen.io/anon/pen/QNQbwb

导航栏与徽标对齐

2 个答案: