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;
}

Demo

如何使用百分比均匀地分隔导航栏元素？

1 个答案: