1
嘿，這是我的第一個網站，我試圖製作一個均勻間隔列表項目和下拉框的導航欄。我已經想出瞭如何製作下拉框，但是在這個過程中，我現在無法將我的物品均勻地分佈在nag欄中。如何使用百分比均勻地分隔導航欄元素？
任何幫助將不勝感激。
CSS：
body {
background-image: url('paper.png');
background-repeat: repeat;
z-index: -1;
}
h1 {
font-size: 32px;
text-decoration: none;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 19px;
}
h4 {
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
color: #E24000;
padding: 0px 0px 0px 1%;
text-shadow: 0.5px 0.5px 1px #333333;
font-weight: normal;
}
h5 {
font-size: 13px;
}
h6 {
font-size: 11px;
}
p {
font-size: 11px;
font-family: Tahoma, Geneva, sans-serif;
padding: 0px 0px 0px 1%;
}
#logo {
padding-top: 5%;
padding-bottom: 2.5%;
display: block;
margin-left: auto;
margin-right: auto;
height: 18%;
width: 18%;
}
#top_image {
background-image: url('family.jpg');
background-size: 100%;
background-repeat: no-repeat;
}
#nav {
background-color: #A1C6E5;
}
#nav_wrapper {
width: 100%;
margin-left: auto;
margin-right: auto;
padding: 1% 1% 1% 1%;
font-size: 20px;
font-family: Tahoma, Geneva, sans-serif;
text-align: justify;
text-shadow: 1px 1px 2px #333333;
background-color: #A1C6E5;
}
#nav ul{
list-style-type: none;
height: auto;
padding-top: 1%;
padding-bottom: 1%;
margin: 0px;
position: relative;
display: block;
text-align: center;
}
#nav ul li{
display: inline-block;
text-align: center;
}
#nav ul li:hover{
}
#nav ul li a,visited{
color: #FFFFFF;
display: block;
padding: 5%;
text-decoration: none;
}
#nav ul li a:hover {
color: #E24000;
text-decoration: none;
}
#nav ul li:hover ul{
display: block;
}
#nav ul ul{
display: none;
position: absolute;
background-color: #A1C6E5;
}
#nav ul ul li{
display: block;
}
#nav ul ul li a,visited{
color #CCC;
}
#nav ul ul li a:hover{
color: #E24000;;
}
HTML：
<!DOCTYPE html>
<html>
<head>
<title>Vitalita</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header id="top_image">
<a href="Home.html"><img id="logo" src="logo.png" alt="Vitalita"></a></br>
</header>
<nav id="nav">
<nav id="nav_wrapper">
<ul>
<li><a href="About.html">About</a>
<ul>
<li><a href="Contactus.html">Contact Us</a></li>
<li><a href="Feedbackform.html">Feedback</a></li>
<li><a href="Helpdesk.html">Helpdesk and FAQ</a></li>
<li><a href="Privacy.html">Privacy Policy</a></li>
</ul>
</li>
<li><a href="Health.html">Health</a></li>
<li><a href="Media.html">Media</a></li>
<li><a href="Tools.html">Tools</a></li>
<li><a href="Forum.html">Forum</a></li>
<li><a href="Account.html">Account</a></li>
</ul>
</nav>
</nav>
</br>
<section>
<article>
<header>
<br><h4>Featured article: Best time of the day to exercise</h4><br>
</header>
<p> The best time of day to exercise is long disputed. In the morning? You'll be worn out for the rest of the day. Before a meal? You won't have enough energy to push yourself. After eating? The food will weigh you down! Before bed? The endorphins will keep you up. We'll take to through the pros and cons of each time.</p>
</article>
</section>
<aside>
<br><h4>Tip of the day!</h4><br>
<p>Clouds don't block all UV rays. Wear sunscreen, even in bad weather!</p>
</aside>
<section>
<header>
<br><h4>About us</h4><br>
</header>
<p>We are a group of uni students dedicated to making the world a healthier place, starting with our own friends. We try our best to make Vitalita a fun, supportive environment that fosters healthy lifestyles, and is a source for reputable information on obesity. We hope you enjoy yourself here.</p>
</section>
<section>
<header>
<br><h4>Contact Us</h4><br>
</header>
<p>Email: [email protected]<br>School of IT<br>The University of Sydney<br>Australia<br>Or by this online form!</p>
</section>
<footer>
<p>Copyright Vitalita 2014</p>
</footer>
</body>
<html>
我也有其他的網頁，雖然我想他們是不相關的解決方案。
再次非常感謝你能夠幫助我的任何人。
乾杯，
約書亞