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

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 值有误，应该是 padding: 10px; (with 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>