css - 如何水平堆叠 block 和/或表格以创建水平导航菜单？

Question

我想用三个小透明框制作一个水平导航栏。该栏将在我的页眉下方居中。我无法让盒子或 table 水平或居中。

正如我所说，我曾尝试制作表格、框和表格单元格。到目前为止都没有解决。我已经检查过我的宽度并且没有干扰元素。

这是 CSS

nav{
background-color: rgba(0, 0, 0, 0.26);
height: 70px;
width: 1200px;
margin-left: auto;
margin-right: auto;
}

nav ul li{
list-style-type: none;
float: left;
}

li a {
text-decoration: none;
color: white;
line-height: 50px ;
text-align:center;
font-family: Andale Mono, monospace;
font-size: 25px;
display: table-cell;
vertical-align: middle;
}

这是 HTML:

         <nav>
            <ul>
                <li>
                    <a href="#"> Home </a>
                    <a href="#"> About </a>
                    <a href="#"> Misc </a>
                </li>
            </ul>
        </nav>

Answer 1

nav {
    display: block;
    width: 100%;
}
nav ul {
    width: 100%;
    display: flex;
    justify-content: center;
}