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

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>