问题描述
我正在为一家电影院建立一个预订网站。
我创建了一个导航栏,但无法集中选项。我尝试使用 text-align: center;但它没有用。
我仅使用 HTML 和 CSS 来构建此站点。
html {
background-color: white;
}
body {
font-family: Verdana,Geneva,Tahoma,sans-serif;
max-width: 1042px;
margin: 10px auto;
}
nav {
width: 100%;
height: 60px;
background-color: rgb(230,23,57);
margin: auto;
text-align: center;
}
nav ul {
float: left;
}
nav ul li {
float: left;
list-style: none;
position: relative;
}
nav ul li a {
display: block;
font-family: Arial,Helvetica,sans-serif;
text-transform: uppercase;
padding: 7px 20px;
text-decoration: none;
color: white;
}
nav ul li a:hover {
color: black;
}
nav ul li ul {
display: none;
position: absolute;
background-color: rgb(230,57);
padding: 10px;
border-radius: 0px 0px 4px 4px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
width: 145px;
border-radius: 4px;
}
nav ul li ul li a {
padding: 5px;
}
nav ul li ul li a:hover {
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- Meta tags -->
<Meta name="description" content="Carnival Cinema">
<Meta name="keywords" content="cinema,indian movies,Carnival,Carnival Cinema">
<!-- CSS Links -->
<link rel="stylesheet" href="header.css">
<title>Carnival Cinema</title>
</head>
<body>
<header>
<h1>Welcome to Carnival Cinema!</h1>
<!-- Navigation Bar -->
<nav>
<ul>
<li><a href="#">Movies</a>
<ul>
<li><a href="#">Now Showing</a></li>
<li><a href="#">Coming Soon</a></li>
</ul>
</li>
<li><a href="#">Promotions</a></li>
<li><a href="#">Corporations</a>
<ul>
<li><a href="#">Events</a></li>
<li><a href="#">Advertisement</a></li>
<li><a href="#">Vouchers</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<body>
</body>
<footer></footer>
</body>
</html>
解决方法
试试
从float
nav ul
nav ul li {
display: inline-block;
list-style: none;
position: relative;
}
除此之外,我建议使用 display: flex 而不是 float。更容易处理并为对齐、居中提供更好的可能性......但在这种情况下,display: inline-block
是最简单的选择。
而且我还建议不要给 nav
一个固定的高度,而是在 margin
的 nav li a
上设置间距。像这样它也总是垂直居中。
将 display: flex;
和 justify-content: center;
添加到 nav
。我建议阅读有关 Flexbox 的更多信息:https://css-tricks.com/snippets/css/a-guide-to-flexbox/