我网站上的菜单栏拒绝水平对齐

Question

我正在尝试使菜单水平对齐，但是它拒绝移动，我不知道如何解决它。菜单在CSS中标为nav ul，在菜单标头中我尝试了其他浮动方式，从媒体查询的其他部分复制并粘贴了代码，但特别是在平板电脑和笔记本电脑版本中，带有主屏幕按钮的菜单和其他内容将垂直对齐。

我不知道我在做什么错。

css从这里开始：-

    width: 100%;
    height: 100%;
    margin: 0;
    font-family: Calibri, Arial, sans-serif;
}
#gridContainer {
    display: grid;
    grid-template-rows: [header] auto [sidebar] auto [main] auto [footer] auto;
    grid-template-columns: [header] auto [sidebar] auto [main] auto [footer] auto;
}
nav ul {
    list-style-type: none;
    text-align: left;
}

body{
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "header" "sidebar" "main" "footer";
}

h1{
    font-size: 3em;
    padding-left: 10px;
}

header {
    grid-area: header;
    background-color: #222222;
    color: #fff;
    font-size: 1.2em;
}

#sidebar {
    grid-area: sidebar;
    background-color: darkseagreen;
}

main {
    grid-area: main;
    background-color: #DBD8D3;
}

footer {
    grid-area: footer;
    background-color: #222222;
}


/* Mobiles */
@media only screen and (max-width:600px){
    nav {
        display: table-cell;
        height: 20%;
        width: 20%;
        font-size: 1.1em;
    }

        nav ul {
            list-style-type: none;
            padding: 0;
            overflow: hidden;
        }

    li a {
        text-align: center;
        padding: 15px;
        float: left;
    }

    nav a a:hover, a:link, a:visited {
        color: #fff;
        text-decoration: none;
        font-size: inherit;
    }

    nav a:hover {
        color: #fff;
        text-decoration: underline;
        font-size: 1.2em;
        background-color: #666666;
    }
}

/* Tablets */
@media only screen and (min-width: 600px) and (max-width: 991px){

    nav {
        display: table-cell;
        height: 20%;
        width: 20%;
        font-size: 1.1em;
    }

        nav ul {
            list-style-type: none;
            padding: 0;
            overflow: hidden;
        }

    li a {
        text-align: center;
        padding: 15px;
        float: left;
    }

    nav a a:hover, a:link, a:visited {
        color: #fff;
        text-decoration: none;
        font-size: inherit;
    }

    nav a:hover {
        color: #fff;
        text-decoration: underline;
        font-size: 1.2em;
        background-color: #666666;
    }
}
h1 {
    margin-bottom: 0;
}


/* Large Screens*/
@media only screen and (min-width: 992px) {
    body {
        display: grid;
        grid-template-columns: 17.5% 82.5%;
        grid-template-rows: 15% auto 5%;
        grid-template-areas: "header header" "sidebar main" "footer footer";
        margin: 0;
        padding: 0;
    }

    header nav{
        float: right;
    }
    nav {
        float: right;
        display: table-cell;
        width: auto;
        font-size: 1.1em;
        flex:row;
    }

        nav ul {
            list-style-type: none;
            padding: 0;
            overflow: hidden;
            margin: 0;
        }
    li a {
        text-align: center;
        padding: 15px;
        float: left;
    }

    nav a a:hover, a:link, a:visited {
        color: #fff;
        text-decoration: none;
        font-size: inherit;
    }

    nav a:hover {
        color: #fff;
        text-decoration: underline;
        font-size: 1.2em;
        background-color: #666666;
    }

    #sidebar {
        background-color: darkseagreen;
        padding: 2%;
    }

        #sidebar img {
            height: 15%;
            width: 100%;
        }

    img{
        float: left;
    }

    main {
        display: grid;
        grid-template-rows: auto auto auto auto;
        grid-template-areas: "title" "event1" "event2" "event3";
        grid-gap: 10px;
    }
    #title{
        grid-area: title;
        padding-left: 1%;
    }

    #event1{
        grid-area: event1;
        border: 3px solid #000;
    }

    #event1 img{
        padding-right: 1%;
    }

    #event2 {
        grid-area: event2;
        border: 3px solid #000;
    }

    #event2 img {
        padding-right: 1%;
    }

    #event3 {
        grid-area: event3;
        border: 3px solid #000;
    }

    #event3 img {
        padding-right: 1%;
    }
}
h1{ 

    margin-bottom: 0;
}```

**HTML starts here**

```<!DOCTYPE html>

<html>

<head>
    <link href="Website_project_Rodrigo_Zapata.css" rel="stylesheet" type="text/CSS">
    <title> North East Events</title>
</head>

<body>


    <header>
        <h1>North East Events</h1>
        <nav>
            <ul>
                <li><a href="file:///U:/HTML5%20stuff/project%20folder/Website_project_Rodrigo_Zapata.html">Home</a></li>
                <li><a href="file:///U:/HTML5%20stuff/project%20folder/Website_project_Rodrigo_Zapata.html">View Events</a></li>
                <li><a href="file:///U:/HTML5%20stuff/project%20folder/Website_project_Rodrigo_Zapata.html">Admin</a></li>
                <li><a href="file:///U:/HTML5%20stuff/project%20folder/Website_project_Rodrigo_Zapata.html">Credits</a></li>
                <li><a href="file:///U:/HTML5%20stuff/project%20folder/Website_project_Rodrigo_Zapata.html">Wireframe</a></li>
            </ul>
        </nav>
    </header>
    <section id="sidebar">
        <h3> <strong> Upcoming </strong></h3>
        <p>Lorem Ipsum</p>
    </section>
    <main>
        <h2 id="title"> <strong> Live Today </strong></h2>
        <section id="event1">
            <img id="image1" src="pic_trulli.jpg" alt="Trulli" width="500" height="333">
            <h3>event 1</h3>
            <p>
                <strong>According:</strong> sample text
            </p>
        </section>

        <section id="event2">
            <img id="image2" src="image2.jpg" alt="cascades" width="500" height="333">
            <h3>event 2</h3>
            <p>
                sample text
            </p>
        </section>

        <section id="event3">
            <img id="image3" src="image3.jpg" alt="temple" width="500" height="333">
            <h3>event 3</h3>
            <p>
               lorem ipsum
            </p>
        </section>

    </main>
    <footer></footer>

</body>

</html>```

Answer 1

删除所有float属性并将以下内容添加到nav ul

display: flex;
flex-direction: row;

您需要增加grid-template-rows％才能在更大的屏幕上看到它。

[Id建议阅读https://css-tricks.com/snippets/css/a-guide-to-flexbox/以帮助理解flexbox。