时间戳

首页 > 解决方案 > 响应式顶部导航未正确响应

html - 响应式顶部导航未正确响应

问题描述

我什至不确定问题标题是否有意义。基本上，我有一个响应式的 topnav，它以我想要的方式工作，除了在媒体断点之间的某个点。问题是链接中的人名太长，所以当屏幕最小化时，它会使该选项卡变得更大。任何帮助深表感谢！

我尝试将所有 px 更改为 % 但它没有解决问题。我也尝试为该特定选项卡创建一个新类，但它很快变得过于混乱，并没有给我带来我希望的结果。我还尝试在该特定选项卡中添加 css。我不确定这是填充问题还是字体大小问题。

https://imgur.com/a/0m01w16

//default topnav CSS//

.topnav {
  overflow: hidden;
  background-color: #555;
  color: white;
  cursor: pointer;
  padding: 14px 14px;
  border: none;
  float: left;
  font-size: 80%;
  text-align: center;
  display: inline-block;
  text-decoration: none; 
  width: 25%;
  outline: 0;
}

//media breakpoint for tablet//

.topnav {
  overflow: hidden;
  background-color: #555;
  color: white;
  cursor: pointer;
  padding: 14px 16px;
  border: none;
  outline: none;
  float: left;
  width: 50%;
  font-size: 90%;
  text-align: center;
  display: inline-block;
  text-decoration: none; 
  outline: 0;
}

我不希望格式脱节。在媒体断点之前，我希望所有内容都在线，但这并没有发生。

标签： htmlcss

解决方案

推荐阅读