如何使用百分比均勻地分隔導航欄元素？

Question

嘿，這是我的第一個網站，我正在嘗試制作一個導航欄，其中包含均勻排列的列表項和下拉框。 我已經想出了如何制作下拉框的方法，但是在此過程中，我現在無法均勻地在小工具欄上散布我的物品。

任何幫助將不勝感激。

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: vitalita@gmail.com<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>

我也有其他頁面，盡管我認為它們與解決方案無關。

再次非常感謝任何能夠幫助我的人。

干杯，

約書亞

Answer 1

如果舊的瀏覽器支持不是問題，則可以使用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;
}

演示

如何使用百分比均勻地分隔導航欄元素？

問題描述

1 個解決方案

解決方案1
2 已采納 2014-09-12 13:16:59

如何使用百分比均勻地分隔導航欄元素？

問題描述

1 個解決方案

解決方案1 2 已采納 2014-09-12 13:16:59

解決方案1
2 已采納 2014-09-12 13:16:59