如何设置此HTML5导航栏的样式？

Question

这是我的导航代码：

<div class="wrapper">
        <header>
            <nav class="nav">
                <ul>
                    <li><a href="#">HOME</a></li>
                    <li><a href="#">COMPANY</a></li>
                    <li><a href="#">MARKETS/SOLUTIONS</a></li>
                    <li><a href="#">PRODUCTS/SERVICES</a></li>
                    <li><a href="#">BUSINESSES</a></li>
                    <li><a href="#">INVESTORS</a></li>
                </ul>
            </nav>
            </header>
            </div>

*{
    box-sizing:border-box;
}
body{
    margin:0;
    padding:0;
    font-family:Verdana;
    font-size:12px;
}
.wrapper{
    margin-left:auto;
    margin-right:auto;
}
nav ul{
    background-color: red;

}
nav ul li{
    display:inline-block;
    padding:15px;

}
nav ul li a{
    text-decoration: none;
    color: #FFFFFF;
}
nav ul li:first-child:hover{
    text-decoration: underline;
    background-color:none;
}
nav ul li:hover{
    background-color:#000;
}

Demo on JSfiddle

如果我将width:960px;放入包装器，它将削减两侧的边距。我需要避免对text-align:center;使用nav ul，因为调整窗口大小时会发生什么。窗口缩小时，列表应居中对齐;在正常大小的窗口中，列表应显示在导航栏的左侧。

Answer 1

JSFiddle - DEMO或SHOW [已编辑]

您可以对小屏幕尺寸使用CSS3 @media查询。

<强> HTML：

<div class="wrapper">
    <header>
        <nav class="nav">
            <ul>
                <li><a href="#">HOME</a>
                </li>
                <li><a href="#">COMPANY</a>
                </li>
                <li><a href="#">MARKETS/SOLUTIONS</a>
                </li>
                <li><a href="#">PRODUCTS/SERVICES</a>
                </li>
                <li><a href="#">BUSINESSES</a>
                </li>
                <li><a href="#">INVESTORS</a>
                </li>
            </ul>
        </nav>
    </header>
</div>

<强> CSS：

* {
    box-sizing:border-box;
}
body {
    margin:0;
    padding:0;
    font-family:Verdana;
    font-size:12px;
}
.wrapper {
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
}
nav ul {
    background-color: red;
}
nav ul li {
    display:inline-block;
    padding:15px;
}
nav ul li a {
    text-decoration: none;
    color: #FFFFFF;
}
nav ul li:first-child:hover {
    text-decoration: underline;
    background-color:none;
}
nav ul li:hover {
    background-color:#000;
}
@media (max-width: 960px) {
    nav {
        text-align: left;
    }
}

Answer 2

首先纠正wrapper的拼写，然后将其宽度设置为80％。

<div class="wrapper">
        <header>
            <nav class="nav">
                <ul>
                    <li><a href="#">HOME</a></li>
                    <li><a href="#">COMPANY</a></li>
                    <li><a href="#">MARKETS/SOLUTIONS</a></li>
                    <li><a href="#">PRODUCTS/SERVICES</a></li>
                    <li><a href="#">BUSINESSES</a></li>
                    <li><a href="#">INVESTORS</a></li>
                </ul>
            </nav>
            </header>
            </div>

*{
    box-sizing:border-box;
}
body{
    margin:0;
    padding:0;
    font-family:Verdana;
    font-size:12px;
}
.wrapper{
    width:80%;
    margin-left:auto;
    margin-right:auto;
}
nav ul{
    background-color: red;

}
nav ul li{
    display:inline-block;
    padding:15px;

}
nav ul li a{
    text-decoration: none;
    color: #FFFFFF;
}
nav ul li:first-child:hover{
    text-decoration: underline;
    background-color:none;
}
nav ul li:hover{
    background-color:#000;
}

Demo on JS Fiddle

Answer 3

以下是您要找的http://jsfiddle.net/adarshkr/ubz7Lcft/9/

使用媒体quires 设置 CSS 的样式

所做的更改

.wrapper{
    width:100%; /*takes full width*/
    margin-left:auto;
    margin-right:auto;
}

nav ul{
    background-color: red;
    text-align:left; /* for normal view */
    padding-left:0

}

@media(max-width:992px){
    nav ul{
        text-align:center /* for resize */
}
}

Answer 4

在 CSS

中进行了更改

nav {
    background-color: red; /*apply color for nav instead of ul */
}
nav ul{

    text-align:left;
    padding-left:0

}
@media(max-width:992px){
    nav ul{
        text-align:center;
    width:80%; /*reduce the list width */
    margin:0 auto; /* to make it align center */
}
}