Question

所以我使用无序列表来创建水平导航栏，我想将该工具栏居中。但是，当我使用text-align：center时，工具栏开头处有一个小空间，导致它稍微偏离中心。这是一张没有居中的照片：

我想让“Home”对着最左边的边界。但似乎有大约20px的空间。这是导航栏中心的图片：

我觉得它偏离中心是因为“主页”按钮与“Tristan Gianola”略微偏离中心。这是CSS＆amp; HTML：

nav{font-family: 'Roboto Condensed', sans-serif;
	font-size:14px;
	text-transform:uppercase;
	margin:0;
	padding:0;
	margin-top:50px;
	border:solid 5px red;
	text-align:center;}
nav ul{border:solid 5px green;}
nav ul li{display:inline;
		margin:2px;}
nav ul li strong{text-decoration:none;
				color:#003434;
				background:#f2f2f2;
				padding:10px;}
nav ul li a{text-decoration:none;
			color:#f2f2f2;
			background:#003434;
			padding:10px;
			border-bottom:solid 1px white;}
nav ul li a:hover{background:grey;}

<!DOCTYPE html>

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
</head>

<body>
	<!--site navigation / toolbar-->
	<nav>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="about.html">About</a></li>
			<li><a href="media.html">Media</a></li>
			<li><a href="calendar.html">Calendar</a></li>
			<li><a href="projects.html">Projects</a></li>
			<li><a href="contact.html">Contact</a></li>
		</ul>
	</nav>
	
	<h1>Tristan Gianola</h1>
	
</body>
</html>

非常感谢提前阅读/回答。

Answer 1

<{>} <ul>的{{3}}，删除它，它将完全居中：

nav ul{
   border:solid 5px green;
   padding:0;
}

default have 40px padding on the left

Answer 2

ul

中有一个填充

nav ul {
    padding-left: 0;
    border:solid 5px green;
}

这应该解决它。：）

导航栏开始时的小空间防止居中

2 个答案:

default have 40px padding on the left