Question

我实际上是在尝试创建导航栏。

但是我希望它大概是7vh，我希望用这个来调整字体。问题是小的悬停效果边框不会始终完美对齐（全屏显示）。

如果有人知道如何解决这个问题，我将非常感激。

＆＃13;

* {
  font-family: Futura;
  margin: 0px;
  padding: 0px;
  color: white;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

body {
  background: #2b2b2a;
}

a {
  text-decoration: none;
}

nav {
  height: 7vh;
  background-color: DeepSkyBlue;
  text-align: center;
  width: 100%;
  position: fixed;
}

/* NOTE: Classes */

/* NOTE: Text elements */

.nav-link {
  font-size: 4vh;
  margin: 0px 1%;
  vertical-align: bottom;
  position: relative;
  padding-top: 1vh;
  top: 1vh;
}

.column-title {
  font-size: 24px;
  padding-bottom: 0.3vh;
}

.column-text {
  text-align: left;
}

#premiere {
  font-size: 3vh;
  float: right;
  transform: translate(-5%, -110%);
}

/* NOTE: Box elements */

.home-column-warper {
  display: inline-table;
  width: 100%;
  text-align: center;
}

.column {
  width: 22%;
  margin: 2vh 1%;
  display: inline-block;
  border: 3px solid white;
  vertical-align: top;
}

/* NOTE: Other */

.logo-image {
  height: 5.5vh;
  float: left;
  margin-top: 0.7vh;
  margin-left: 0.7vh;
  transform: translate(0%, -110%)
}

.vline {
  border-right: 3px solid white;
  font-size: 20px;
  padding-left: 6px;
}

.selected {
  border-bottom: solid 3px LightBlue;
  padding-bottom: 0.4vh;
}

::selection {
  background: DeepSkyBlue;
}

/* NOTE: IDs */

#nav-warper {
  width: 100%;
  height: 6vh;
}

/* NOTE: Hover */

.nav-link:hover {
  color: wheat;
  border-bottom: solid 3px LightBlue;
  padding-bottom: 0.4vh;
}

＆＃13;

<!DOCTYPE html>
<html lang="fr" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Bac 2018</title>
    <link rel="stylesheet" href="./data/CSS/styling.css">
  </head>
  <body>
    <nav>
      <div id="nav-warper">
        <a href="#" class="nav-link selected">Accueil</a><a class="vline"></a>
        <a href="./data/Pages/plans.html" class="nav-link">Plans</a><a class="vline"></a>
        <a href="./data/Pages/cours.html" class="nav-link">Cours</a><a class="vline"></a>
        <a href="./data/Pages/plus.html" class="nav-link">Plus</a>
      </div>
      <img src="./data/Media/logo.png" alt="Logo du site" class="logo-image">
      <span id="premiere">Première Littéraire</span>
    </nav><br><br><br>
    <div class="home-column-warper">
      <div class="column">
        <p class="column-title">PLANS</p>
        <span>Cette section regroupe tout les plans des oeuvres ou extraits vu en lecture analytique en français et littérature. Elle comporte quelques documents vu en lecture cursive ainsi que des résumés des oeuvres vu en classe. Pour obtennir la définition d'un mot passer le curseur dessus, les mots dotés d'une définition sont soulignés. Il est possible que certaines fiches contiennent des erreurs, idem pour les résumés d'oeuvres ou de documents en lecture cursive. Donc si vous voyez une erreur ou une information qui manque, envoyez moi un mail : miloertas@gmail.com, ça évitera que tout le monde apprennent un truc faux...</span>
      </div>
      <div class="column">
        <p class="column-title">COURS</p>
        <span>Cette section regroupe les principaux cours de l'année. Tout ce qui est notions, objets d'études ou en relation avec l'oral se retrouve dans cette section. Informations sur objets d'études et cours théorique également dedans</span>
      </div>
      <div class="column">
        <p class="column-title">PLUS</p>
        <span>Cette section regroupe toutes les notifications d'erreurs ou les documents inclassables. Bientôt cette section contiendra les documents scan des textes pour le bac oral.</span>
      </div>
      <div class="column">
        <p class="column-title">MODIFICATIONS</p>
        <span>Cette section regroupe toutes les modifications oppérés sur le site (Comprend la correction de bugs l'ajout de fonctionnalités et la correction d'erreur dans les fiches).<br>- Ajout de la section PLUS.<br>- Correction FICHE, Dom Juan v1 : "C'est une dimension tragique et non une tragédie".</span>
      </div>
  </body>
</html>

＆＃13;

Answer 1

元素悬停时不对齐的原因很可能是因为它在悬停发生之前不存在所以添加此行：

border-bottom: solid 3px transparent;

致：

.nav-link

应该解决它：）

使用vh进行对齐的问题

1 个答案: