我实际上是在尝试创建一个导航栏。
但是我希望它大约为 7vh，并且我希望字体可以随之调整。 问题是小的悬停效果边框不会一直完美对齐(全屏显示)。
如果有人知道如何解决这个问题，我们将不胜感激。
* {
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;
}<!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>最佳答案
元素悬停不对齐的原因很可能是因为它在悬停发生之前不存在所以添加此行:
border-bottom: solid 3px transparent;
致:
.nav-link
应该可以解决:)
关于html - 使用 vh 对齐的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49613458/