Question

所以我是这个HTML的新手，我正在尝试导航栏。当我将鼠标悬停在一个li / a元素上时，我会在导航栏的整个高度上获得另一种颜色。

＆＃13;

body{
	margin: 0px;
	padding: 0px;
}

.header{
	width: 100%;
	height: 55px;
	background-color: #ecf0f1;
	text-align: right;
	overflow: hidden;
}

.navbar ul{
}
	.navbar ul li{
		list-style-type: none;
		display: inline-block;
		text-align: center;
		height: 100%;	
	}
		.navbar ul li a{
			text-decoration: none;
			color: black;
			font-family: 'Franklin Gothic';
			padding: 50px;
			height: 100%;
		}

.navbar ul li:hover{
	background-color: #bdc3c7;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title>HTML</title>
	<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
	<div class="header">
		<div class="navbar">
			<ul>
				<li><a href="#">1</a></li>
				<li><a href="#">2</a></li>
				<li><a href="#">3</a></li>
				<li><a href="#">4</a></li>
			</ul>
		</div>
	</div>
</body>
</html>

＆＃13;

然后我更改了代码中的一些内容并提出了这个问题（Here is the second experiment result）（删除overflow:hidden;并将其更改为line-height:55px;）

我的全高度悬停，但浏览器窗口和我的导航栏之间有一个白色的间隙。

＆＃13;

body{
	margin: 0px;
	padding: 0px;
}

.header{
	width: 100%;
	height: 55px;
	background-color: #ecf0f1;
	text-align: right;
	line-height: 55px;
}

.navbar ul{
}
	.navbar ul li{
		list-style-type: none;
		display: inline-block;
		text-align: center;
		height: 100%;	
	}
		.navbar ul li a{
			text-decoration: none;
			color: black;
			font-family: 'Franklin Gothic';
			padding: 50px;
			height: 100%;
		}

.navbar ul li:hover{
	background-color: #bdc3c7;
}

＆＃13;

我知道有很多像我这样的类似问题，我在问这里之前已经阅读了它们，但我仍然没有得到我想要的结果。

Answer 1

在这里，您的导航栏需要删除边距，因此请检查代码..

编辑：我也稍微修改了a，所以它不会溢出导航栏并填满它的全高。

＆＃13;

body {
  margin: 0px;
  padding: 0px;
}
.header {
  width: 100%;
  height: 55px;
  background-color: #ecf0f1;
  text-align: right;
  line-height: 55px;
}
.navbar ul {
  margin: 0;  /* <--- THIS IS WHAT REMOVES BLANK SPACE ABOVE/BELOW NAVBAR */
}
.navbar ul li {
  list-style-type: none;
  display: inline-block;
  text-align: center;
  height: 100%;
}
.navbar ul li a {
  text-decoration: none;
  color: black;
  font-family: 'Franklin Gothic';
  padding: 0 50px; /* more proper use of padding */
  line-height: 55px; /* line-height to allow full clickable area */
  display: block; /* so the line-height can be applied */
}
.navbar ul li:hover {
  background-color: #bdc3c7;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>HTML</title>
  <link rel="stylesheet" type="text/css" href="style/style.css">
</head>

<body>
  <div class="header">
    <div class="navbar">
      <ul>
        <li><a href="#">1</a>
        </li>
        <li><a href="#">2</a>
        </li>
        <li><a href="#">3</a>
        </li>
        <li><a href="#">4</a>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>

＆＃13;

Answer 2

在CSS中添加

html,body {
margin: 0;
padding:0;

}

CSS Navbar悬停全高

2 个答案: