HTML导航栏自适应填充[重复]答案

【问题标题】：HTML Navigation bar adaptive padding [duplicate]HTML导航栏自适应填充[重复]
【发布时间】：2021-12-10 22:09:17
【问题描述】：

我正在使用 HTML 和 CSS 创建一个网站，并制作了一个导航栏来在网站上移动。

但是，导航栏上的填充有问题。我进行了设置，这样每当您将光标悬停在导航栏上的某个选项上时，文本就会变为粗体并且背景颜色会发生变化。但是，每当光标悬停在文本上时，它就会变为粗体并且文本会展开。有没有一种方法可以在鼠标悬停在文本上时更改填充，以便当文本变为粗体时不会移动导航栏上的其他项目？

我的代码（我使用标签将当前页面的选项设为粗体）：

<DOCTYPE html>
    <head>
    <style>
        .topnav {
        overflow: hidden;
        background-color: black;
        }

        .topnav a {
        float: left;
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        }

        .topnav a:hover {
        background-color: #2222
        color: white;
        font-weight: 700;
        }
    </style>
    </head>
        <div class="topnav">
        <b><a href="\index.html">Home</a></b>
        <a href="\ComingSoon\index.html">Coming Soon</a>
        <a href="\VideoLibrary\index.html">Video Library</a>
        <a href="\CastAndCrew\index.html">Cast and Crew</a>
        </div>
    //rest of body code
    </body>
    </html>

【问题讨论】：

标签： html css

【解决方案1】：

这是一个使用 CSS pseudo-element 和 attribute 的技巧

.topnav {
  overflow: hidden;
  background-color: black;
  display:flex;
}

.topnav a {
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.topnav a:first-child{
  font-weight: 700;
}

.topnav a:hover {
  background-color: #222;
  font-weight: 700;
}

.topnav a:before {
  display: block;
  content: attr(data-title);
  font-weight: 700;
  overflow: hidden;
  visibility: hidden;
  height: 0;   
}

<div class="topnav">
  <a data-title="Home" href="\index.html">Home</a>
  <a data-title="Coming Soon" href="\ComingSoon\index.html">Coming Soon</a>
  <a data-title="Video Library" href="\VideoLibrary\index.html">Video Library</a>
  <a data-title="Cast and Crew" href="\CastAndCrew\index.html">Cast and Crew</a>
</div>

【讨论】：