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

Posted 2023-03-06

技术标签:

【中文标题】HTML导航栏自适应填充[重复]【英文标题】：HTML Navigation bar adaptive padding [duplicate] 【发布时间】：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>

【问题讨论】：

【参考方案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>

【讨论】：

以上是关于HTML导航栏自适应填充[重复]的主要内容，如果未能解决你的问题，请参考以下文章