Question

几天前，我开始使用html和css，我试图在我的网站顶部创建一个导航器，但结果却很奇怪，我的第二个ul比我的低3个像素，而我的两个ul都高了50像素。为什么会这样？

:root{
    	font-size: 10px;
    }
    *{
    	padding:0px;
    	border:0px;
    	margin:0px;
    	color:black;
    	text-decoration: none;
    	list-style: none;
    	font-weight: normal;
    	line-height: 1;
    }
    .nav{
    	background: rgb(150,150,150);
    	width: 100%;
    	height: 5rem;
    }
    .nav ul{
    	display: inline-block;
    }
    .nav ul a{
    	display: inline-block;
    }
    .nav ul a:hover{
    	background: rgb(100,100,100);
    }
    .pages a{
    	font-size: 2rem;
    	padding: 1.5rem;
    }
    .home{
    	display: inline-block;
    }
    .home a li{
    	font-size: 3rem;
    	padding: 1rem;
    }

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../css/main.css">
<head>
  <title>Mark Olieman</title>
</head>
<body>
  <nav class="nav">
    <ul class="home">
      <a href=""><li>test</li></a>
    </ul>
    <ul class="pages">
    <a href=""><li>Contact</li></a>
  </ul>
  </nav>

</body>
</html>

Answer 1

看看以下内容。另外，您的HTML标记是错误的。

:root{
  font-size: 10px;
}
*{
  padding:0px;
  border:0px;
  margin:0px;
  color:black;
  text-decoration: none;
  list-style: none;
  font-weight: normal;
  line-height: 1;
  box-sizing: border-box; /* Make sure padding stays on the inside of the box */
}
.nav{
  background: rgb(150,150,150);
  width: 100%;
  height: 5rem;
}
.nav ul{
  vertical-align: middle; /* Make sure everything align in the center */
}
.nav ul, .nav li, .nav a {
  display: inline-block;
}

.nav a:hover{
  background: rgb(100,100,100);
}

.pages a{
  font-size: 2rem;
  padding: 1.5rem;
}

.home a{
  font-size: 3rem;
  padding: 1rem;
}

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../css/main.css">
<head>
  <title>Mark Olieman</title>
</head>
<body>
  <nav class="nav">
    <ul class="home">
      <li><a href="">test</a></li>
    </ul>
    <ul class="pages">
      <li><a href="">Contact</a></li>
    </ul>
  </nav>

</body>
</html>

Answer 2

正在向UL中的项目添加填充。尤其如此。

.pages a {
    font-size: 2rem;
    padding: 1.5rem;
}

<a>和其他所有内容都应该放在<li>标记内。

<nav class="nav">
  <ul class="home">
    <li><a href="">test</a></li>
  </ul>
  <ul class="pages">
    <li><a href="">Contact</a></li>
  </ul>
</nav>

为什么一个比另一个低

2 个答案: