Question

我发现这是在w3schools（article）上制作响应式菜单的非常简单的方法，但我一直在努力试图将其水平居中几天。

HTML

 <ul class="topnav">
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li class="icon">
    <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
  </li>
</ul>

CSS

 /* Remove margins and padding from the list, and add a black background color */
ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

/* Float the list items side by side */
ul.topnav li {float: left;}

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #111;}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}

Answer 1

我从你链接的代码中做了一个小提琴：https://jsfiddle.net/gqm7zdf9/

一个可靠的选项是在UL周围添加一个包装器，以便您可以在那里移动背景颜色。然后将它放在包装器中。

<强> HTML

<div class="nav-wrapper">
    <ul class="topnav">
        ...
    </ul>
</div>

其他CSS

div.nav-wrapper {
    background-color: #333;
}
div.nav-wrapper ul.topnav {
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

如果您能够（取决于您需要支持的浏览器）使用display:flex，则可以使用更简单的选项。您只需添加一些 CSS ：

ul.topnav {
    /* ... */
    display: flex;
    justify-content: center;
}

https://jsfiddle.net/gqm7zdf9/1/

我想你可以从那里继续你的媒体查询......

如何使导航居中

1 个答案: