Question

HTML

<title>
    menubar
    </title>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
    <nav>
        <ul>
            <li>
                <a href="#">Home                                  </a>
            </li>
            <li>
                <a href="#">About Us                                 </a>
                <ul>
                    <li>
                        <a href="#">What we do</a>
                    </li>
                    <li>
                        <a href="#">Members and Alumni</a>
                    </li>
                    <li>
                        <a href="http://www.katyisd.org/campus/crhs/Pages/default.aspx" target="_blank">Cinco Ranch High School</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Events                                 </a>
            </li>
            <li>
                <a href="#">Photo Gallery                                 </a>
            </li>
            <li>
                <a href="#">Contact Us                                 </a>
            </li>
        </ul>
    </nav>
</head>
<body></body>

CSS

@font-face {
    font-family: NASA;
    src: url("nasalization rg.ttf");
}

nav ul ul {
    display: none;
}

    nav ul li:hover > ul {
        display: block;

    }

nav {
  width:1080px;
  margin:0 auto;
  list-style:none;

}

nav ul {
    background: #8D8D8D; 
    background: linear-gradient(top, #8D8D8D 0%, #383838 100%);  
    background: -moz-linear-gradient(top, #8D8D8D 0%, #383838 100%); 
    background: -webkit-linear-gradient(top, #8D8D8D 0%,#383838 100%); 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 0px auto 0px auto;
    border-radius: 5.5px;  
    list-style: none;
    position: relative;
    display: inline-table;
  font-family: NASA;
  font-weight: bold;
  font-size: 20px;
  width 100%;
  margin-top: 0px
}

    nav ul:after {
        content: ""; clear: both; display: block;
    }

  nav ul li {
    float: left;
  padding-right: 20px
}
    nav ul li:hover {
        background:#777777;
        background: linear-gradient(top, #777777 0%, #6B6B6B 40%);
        background: -moz-linear-gradient(top, #777777 0%, #6B6B6B 40%);
        background: -webkit-linear-gradient(top, #777777 0%,#6B6B6B 40%);
    }
        nav ul li:hover a {
            color: #2E2E2E;
        }

    nav ul li a {
        display: block; 
    padding: 25px 40px;
        color: #151515; 
    text-decoration: none;
    }

  nav ul ul {
    background: #6B6B6B; border-radius: 10px; padding: 0;
    position: absolute; top-center: 100%;
}
    nav ul ul li {
        float: none; 
        border-top: 1px solid #000000;
        position: relative;
    }
        nav ul ul li a {
            padding: 15px 40px;
            color:#2E2E2E;
        }   
            nav ul ul li a:hover {
                background: #4b545f;
            }

上面我已经包含了导航栏的HTML和CSS，我一直试图弄清楚如何让它跨越页面的整个长度，内容居中于中间，如下所示：http://www.cssnewbie.com/full-width-centered-navigation-bar/#.VY8G7PlVhBc。如果有人可以帮助我，那将是非常好的，提前谢谢你，我知道我的HTML没有标记，我会修复它

Answer 1

给你的导航宽度为100％;然后在nav ul上设置1080px的宽度，加上margin：0 auto;。

如何让导航/菜单栏的宽度跨越整个页面

1 个答案: