时间戳

首页 > 解决方案 > 响应式导航 - 下拉链接

html - 响应式导航 - 下拉链接

问题描述

再次玩弄网站设计。

如何在不弄乱下拉链接的情况下使导航栏链接居中对齐？

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_responsive_navbar_dropdown

我希望导航栏保持原样，但是中间的链接，但是我尝试的所有使链接居中的操作都会在窗口折叠时破坏响应式下拉链接？

标签： htmlcss

解决方案

您可以例如更改.topnav为

.topnav {
  overflow: hidden;
  background-color: #333;
  display: flex;
  justify-content: center;
}

但是您必须在媒体查询中删除该样式，例如：

@media screen and (max-width: 600px) {
  .topnav {
    display: block;
  }
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
  .topnav a {
    display: block;
  }
}

推荐阅读