居中导航栏 div
Centering Navigation bar div
我在高中学习了一点 html 和 css,但是我在为我的小企业创建网站时遇到了一些麻烦。我已经创建了我的导航栏设计,但我无法将它放在我的包装器中。我当前的代码如下。
body {
background-color: #3393FF;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}
#wrapper {
width: 1300px;
margin-left: auto;
margin-right: auto;
background-color: white;
}
#navigation: {
margin-left: auto;
margin-right: auto;
}
#navigation li {
display: inline-block;
line-height: 40px;
height: 40px;
}
#navigation a {
text-decoration: none;
text-align: center;
color: #fff;
display: block;
width: 204px;
font-size: 15px;
background-color: #3393ff;
}
#navigation a:hover {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 3px #000;
color: #fff;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">
<title>Xcite Technologies</title>
</head>
<body>
<div id="wrapper">
<br>
<div id="navigation">
<ul>
<li><a href="index.html">Home</a>
</li>
<li><a href="aboutus.html">About Us</a>
</li>
<li><a href="services.html">Services</a>
</li>
<li><a href="pricing.html">Pricing</a>
</li>
<li><a href="contact.html">Contact Us</a>
</li>
</ul>
</div>
<br>
<br>
</div>
</body>
</html>
我已经尝试了这里发布的几种不同的方法,但似乎没有任何效果。我相信这将是一个简单的解决方案,并且感觉我正在获得隧道视野。提前感谢您的帮助!
您好,您可以使用 HTML 来做到这一点:
使用 <center>
标签,你的代码会变成这样:
<body>
<div id="wrapper">
<br>
<div id="navigation">
<ul>
<center>
<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="contact.html">Contact Us</a></li>
</center>
</ul>
</div>
<br>
<br>
</div>
</body>
请测试一下,如果有效,现在告诉我:)
首先从您的 html 代码中删除 BR 这不是创建垂直 space 使用填充或边距的好主意。
body {
background-color: #3393FF;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}
#wrapper {
width: 1300px;
padding: 20px 0 40px;
background-color: white;
}
#navigation {
text-align: center;
}
#navigation ul {
display: inline-block;
padding: 0;
}
#navigation li {
display: inline-block;
line-height: 40px;
height: 40px;
}
#navigation a {
text-decoration: none;
text-align: center;
color: #fff;
display: block;
width: 204px;
font-size: 15px;
background-color: #3393ff;
}
#navigation a:hover {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 3px #000;
color: #fff;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">
<title>Xcite Technologies</title>
</head>
<body>
<div id="wrapper">
<div id="navigation">
<ul>
<li><a href="index.html">Home</a>
</li>
<li><a href="aboutus.html">About Us</a>
</li>
<li><a href="services.html">Services</a>
</li>
<li><a href="pricing.html">Pricing</a>
</li>
<li><a href="contact.html">Contact Us</a>
</li>
</ul>
</div>
</div>
</body>
</html>
希望对您有所帮助 :D
我在高中学习了一点 html 和 css,但是我在为我的小企业创建网站时遇到了一些麻烦。我已经创建了我的导航栏设计,但我无法将它放在我的包装器中。我当前的代码如下。
body {
background-color: #3393FF;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}
#wrapper {
width: 1300px;
margin-left: auto;
margin-right: auto;
background-color: white;
}
#navigation: {
margin-left: auto;
margin-right: auto;
}
#navigation li {
display: inline-block;
line-height: 40px;
height: 40px;
}
#navigation a {
text-decoration: none;
text-align: center;
color: #fff;
display: block;
width: 204px;
font-size: 15px;
background-color: #3393ff;
}
#navigation a:hover {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 3px #000;
color: #fff;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">
<title>Xcite Technologies</title>
</head>
<body>
<div id="wrapper">
<br>
<div id="navigation">
<ul>
<li><a href="index.html">Home</a>
</li>
<li><a href="aboutus.html">About Us</a>
</li>
<li><a href="services.html">Services</a>
</li>
<li><a href="pricing.html">Pricing</a>
</li>
<li><a href="contact.html">Contact Us</a>
</li>
</ul>
</div>
<br>
<br>
</div>
</body>
</html>
我已经尝试了这里发布的几种不同的方法,但似乎没有任何效果。我相信这将是一个简单的解决方案,并且感觉我正在获得隧道视野。提前感谢您的帮助!
您好,您可以使用 HTML 来做到这一点:
使用 <center>
标签,你的代码会变成这样:
<body>
<div id="wrapper">
<br>
<div id="navigation">
<ul>
<center>
<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="contact.html">Contact Us</a></li>
</center>
</ul>
</div>
<br>
<br>
</div>
</body>
请测试一下,如果有效,现在告诉我:)
首先从您的 html 代码中删除 BR 这不是创建垂直 space 使用填充或边距的好主意。
body {
background-color: #3393FF;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}
#wrapper {
width: 1300px;
padding: 20px 0 40px;
background-color: white;
}
#navigation {
text-align: center;
}
#navigation ul {
display: inline-block;
padding: 0;
}
#navigation li {
display: inline-block;
line-height: 40px;
height: 40px;
}
#navigation a {
text-decoration: none;
text-align: center;
color: #fff;
display: block;
width: 204px;
font-size: 15px;
background-color: #3393ff;
}
#navigation a:hover {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 3px #000;
color: #fff;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">
<title>Xcite Technologies</title>
</head>
<body>
<div id="wrapper">
<div id="navigation">
<ul>
<li><a href="index.html">Home</a>
</li>
<li><a href="aboutus.html">About Us</a>
</li>
<li><a href="services.html">Services</a>
</li>
<li><a href="pricing.html">Pricing</a>
</li>
<li><a href="contact.html">Contact Us</a>
</li>
</ul>
</div>
</div>
</body>
</html>
希望对您有所帮助 :D