Question

我想制作一个带有三个透明小框的水平导航栏。该栏将位于我的页面标题下方。我无法让盒子或桌子水平或居中放置。

正如我所说，我尝试做桌子，盒子和桌子单元。到目前为止，还没有一个解决方案。我检查了我的宽度，并且没有干扰元素。

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

Answer 2

您几乎拥有它。

只需使<ul>内联块，并用<nav>替换text-align:center中的<ul>中的左边距/右边距将可以解决问题，因为<nav>占用了nav{ background-color: rgba(0, 0, 0, 0.26); display: block; height: 70px; width: 1200px; text-align: center; } nav ul{ display: inline-block; }使浏览器不知道将其居中对齐。

{{1}}

否则，我也建议使用Esger提供的flexbox解决方案来解决问题。

如何水平堆叠块和/或表以创建水平导航菜单？

2 个答案: