如何使用CSS3始终使我的栏在页面中居中？

How do I get my bar to be centered in the page at all times?

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

And how do I get the color to stretch across as well? (I know I'll need to change the background color of list item, but nothing else seems to work).

我如何才能让颜色延伸到最后? (我知道我需要更改列表项的背景颜色,但似乎没有其他工作)。

Here is my CSS code:

这是我的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;}

And my HTML CODE:

我的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>

1 个解决方案

#1

Use this:

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

It may help.

它可能有所帮助。