Как я могу равномерно разместить элементы навигационной панели, используя проценты?

Эй, это мой первый сайт, и я пытаюсь создать навигационную панель с равномерно распределенными элементами списка и выпадающими ячейками. Я выяснил, как сделать выпадающие окна, но в процессе я теперь не могу равномерно распространять свои вещи через бар для наг.Как я могу равномерно разместить элементы навигационной панели, используя проценты?

Любая помощь была бы принята с благодарностью.

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>

У меня также есть другие страницы, хотя я предполагаю, что они не имеют отношение к решению.

Еще раз спасибо вам всем, кто может мне помочь.

Cheers,

Джошуа

источник

2014-09-12 joshuatvernon

Если древняя поддержка браузера не является проблемой, вы можете использовать css3 flexbox:

#nav ul { 
    display: flex; 
    justify-content:space-around; 
    list-style-type: none; 
    height: auto; 
    padding-top: 1%; 
    padding-bottom: 1%; 
    margin: 0px; 
    position: relative; 
    text-align: center; 
}

Demo

источник

2014-09-12 13:16:59

Как я могу равномерно разместить элементы навигационной панели, используя проценты?

ответ

Смежные вопросы