Question

如何让我的栏在任何时候都在页面中居？

我如何让颜色延伸到最后？（我知道我需要更改列表项的背景颜色，但似乎没有其他工作）。

这是我的CSS代码：

  #nav {font-family: journalregular; 
     width: 90%;
     box-shadow: 0px 7px 22px -6px rgba(0,0,0,0.75);}


#nav ul {
        list-style: none;
        padding: 0;
        margin: 0;  
        background:#ffffff; 
    }

    #nav a {
        font-weight: bold;
        font-size: 250%;
        color: black;
        text-decoration: none;
        cursor: default;
    }

    #nav li li a {
        display: block;
        font-weight: normal;
        font-size: 180%;
        font-weight: bold;
        color: black;
        padding: 10px 10px;
    }

    #nav li li a:hover {cursor:pointer;
                    background: pink;}

    #nav li {
        display: inline-table;
        position: relative;
        width: 10em;
        text-align: center;
        cursor: default;
        background-color: #DEB887;
        /*border: 1px solid #7d6340;
        border-width: 0px 0px 1px 0px;*/
    }

    #nav li ul{
        position: absolute;
        top: 100%;
        width:10em;
        font-weight: normal;
        padding: 0.5em 0 1em 0;
        border: solid 1px #DEB887;
    }

    #nav li>ul {
        top: auto;
        left: auto;
        display: none;
        opacity: 0;
        transition: display .5s;
    }

    #nav li li {
        display: block;
        float: none;
        background-color: white;
        border: 0;
    }

    #nav li:hover > ul{
        display: block;
        opacity: 1;
    }

a{text-decoration: none;}

我的HTML代码：

<link rel="stylesheet" href="css/styles.css">

<nav id="nav">
    <ul>        
        <li>
            <a href="#">Geography</a>
        </li>

        <li>
            <a class="ambMenu" href="#">Ambience</a>
                <ul>
                    <li><a href="#">House</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                </ul>
        </li>

        <li>
            <a href="#">Pets</a>
                <ul>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                </ul>
        </li>

        <li>
            <a href="#">Food</a>
                <ul>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                </ul>
        </li>
    </ul>
</nav>

Answer 1

使用此：

.center {
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    background-color: #b0e0e6;
}

这可能会有所帮助。

如何使用CSS3始终使<nav>栏在页面中居中？</nav>

1 个答案: