导航栏中的链接显示在一起

Question

>我正在使用无序列表开发一个带有水平导航栏的网站，尽管为链接设置了填充，但链接仍然成堆显示在一起。我该如何纠正此问题？

我正在编写 W3Schools 教程 (https://www.w3schools.com/css/css_navbar.asp(，我基本上复制了他们在水平导航栏部分中所做的工作。

我尝试为列表项而不是链接设置填充，但这没有区别。

/* Navigation bar:*/
#topNavDiv {
	display: block;
	border-style: solid;
	background-color: black;
	overflow: auto;
}
#topNavList {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
.topNavListItem {
	float: right;
}
.topNavListItem, a {
	position: relative;
	right: 50px;
	display: block;
	padding: 10;
	text-decoration: none;
	color: white;
	background-color: black;
}

<div id="topNavDiv">
			<ul id="topNavList">
				<li><a href="#" class="topNavListItem ubuntuFont">search</a></li>
				<li><a href="#" class="topNavListItem ubuntuFont">contact</a></li>
				<li><a href="#" class="topNavListItem ubuntuFont">about</a></li>
				<li><a href="#" class="topNavListItem ubuntuFont">tutorials</a></li>
				<li><a href="index.html" class="topNavListItem ubuntuFont">home</a></li>
			</ul>
		</div>

Answer 1

你的填充值错误，应该padding: 10px;(用 px(

/* Navigation bar:*/
#topNavDiv {
	display: block;
	border-style: solid;
	background-color: black;
	overflow: auto;
}
#topNavList {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
.topNavListItem {
	float: right;
}
.topNavListItem, a {
	position: relative;
	right: 50px;
	display: block;
	padding: 10px;
	text-decoration: none;
	color: white;
	background-color: black;
}

<div id="topNavDiv">
<ul id="topNavList">
<li><a href="#" class="topNavListItem ubuntuFont">search</a></li>
<li><a href="#" class="topNavListItem ubuntuFont">contact</a></li>
<li><a href="#" class="topNavListItem ubuntuFont">about</a></li>
<li><a href="#" class="topNavListItem ubuntuFont">tutorials</a></li>
<li><a href="index.html" class="topNavListItem ubuntuFont">home</a></li>
</ul>
</div>