html - 使用 vh 对齐的问题-6ren

html - 使用 vh 对齐的问题

转载作者：行者123 更新时间：2023-11-28 01:56:14

36

4

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

但是我希望它大约为 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/

36

4

0

文章推荐： javascript - 从 div 滚动到下一个 div(不同高度)

文章推荐： javascript - JQuery 测试工具

文章推荐： html - 无法弄清楚正确的悬停效果

文章推荐： javascript - 如何检测输入文本中的值何时被脚本更改？

html - 需要一个固定的导航栏和包含导航栏高度的登录页面 VH
我正在制作我的第一个作品集，但在做两件事时遇到了一些麻烦。创建一个固定的导航栏。当我使用 position: fixed;它清除了我在右侧“联系我”上的 float ，一切都崩溃了。在我的示例中，我
Javascript 向下滚动 vh
如果我想使用这个 JavaScript 命令: window.scrollBy(0,50); 它向下滚动页面 50px。是否有一个简单的相当于向下滚动页面 50vh 的方法？这行不通 window.
css - vh/% 单位和移动设备上的键盘
我对像 vh/% 这样的高度单位有疑问。当任何 input 处于事件状态时，移动设备上的键盘会更改元素高度。我正在寻找在键盘处于事件状态时将其更改为静态高度的解决方案。 jsfiddle (在移动设备
html - 如何使用 VH 制作响应式英雄背景图片？
:) 我有一个响应式标题。这是英雄部分的代码: .hero { background: url(../../img/hero.jpg); background-size: cover
css - 不一致的 vh 单元行为
我有一个在悬停时出现的伪元素: height: 0.4vh; 高度不会改变，只有宽度会改变。然而，出于某种原因，在某些条件下，不同伪元素的高度不同(此处的两条较暗的线都有 height: 0.4vh)
Css 查询来替换类似 "vh"查询的东西
我最近发现自己弄乱了“vh”css:它似乎很有效，但我知道大多数旧浏览器都不支持它。我想知道是否有人可以启发我对此的任何替代方案:我知道 @media 查询的存在，但我不知道它们如何帮助我解决我的问题
javascript - 根据 vh 将垂直元素对齐到所有分辨率
我有一些元素作为图层工作(所有元素都是绝对定位的并且带有 z-index)。主要的问题是，我有一张图片应该放在我的视口(viewport)高度 (vh) 的底部 0 我已经尝试过底部定位、垂直对齐
html - 使用 vh 对齐的问题
我实际上是在尝试创建一个导航栏。但是我希望它大约为 7vh，并且我希望字体可以随之调整。问题是小的悬停效果边框不会一直完美对齐(全屏显示)。如果有人知道如何解决这个问题，我们将不胜感激。 * {
css - 如何使用 vh 制作页眉背景图片？
我对 CSS 非常陌生，我正在通过教程构建我的第一个网站。无论出于何种原因，我的标题背景图片都不会加载。我仔细检查了我的图像路径。我试过从类似问题中复制和粘贴代码，但似乎没有任何效果。这是代码。 h
html - CSS - vh 有效而百分比无效
这个问题在这里已经有了答案: How to set a percentage height value in HTML/CSS (7 个答案) 关闭 4 年前。
html - 如何保留 VH 布局的部分？
我正在尝试实现以下布局(图 1)，其想法是根据屏幕(台式机和笔记本电脑屏幕)保持相同的结构和比例但是，在我当前的代码中，它在台式机上看起来不错，但我不知道在不更改布局的情况下保留笔记本电脑屏幕中元素
javascript - 如何以像素为单位降低 VH 的值？
代码 JS: var windowheight = $(window).outerHeight(); var meniu= $('.navbar-fixed-top').outerHeight()
javascript - 如何补偿滚动时android移动浏览器的隐藏地址栏？如何在所有浏览器中正确测量 'vh'？
有没有一种方法/jQuery 方法可以单独测量视口(viewport)高度？本地址栏显示时一个 vh，本地址栏隐藏时另一个 vh？ var vhAdBarPresent = $(window).he
javascript - 如何将以 vh 给出的元素的高度转换为像素？
我将一个元素的最大高度设置为 65vh。我需要在我的 JavaScript 中将它转换为像素，以查看图像是否适合那里，或者我是否需要缩小/裁剪它。 (正在做 win8 App 开发)。这行得通吗？
css - 使用 vh 的布局不随缩放缩放
我试图创建一个仅使用 vh 大小的登录表单。这样做是希望整个表单能够根据视口(viewport)进行缩放。没有!出于某种原因放大，在输入字段和下面的文本之间会创建一个空白区域，该空白区域会随着放大程
css - vh 单位的最小值/最大值是多少？
例如，浏览器有哪些限制？如果我有 99999999999999 vh，它实际上是 99999999999999 vh 还是像 2145629vh 这样奇怪的东西？最佳答案从视口(viewport)
javascript - CSS:是否有一个单位等同于 vh + vw？
我想知道是否有一个字体大小单位可以测量页面宽度和高度的 1%？我认为这会让我更容易，并帮助我做我想做的事情，而不必使用 JavaScript(尽管任何答案都是可以接受的，只要它有效)。如果没有这样的单
html - 使用 CSS vh 单位和百分比时不显示内容
当使用 CSS vh 和百分比定义元素(例如 div)的高度时，如果内容溢出元素，元素是否会拉伸(stretch)。在我的笔中，我正在尝试为底部的 div(其 ID 为 contact)填写内容。但
html - 当父元素高度设置为 vh 时，内部内容和滚动条被兄弟元素的高度截断
我正在尝试创建一个占视口(viewport)固定百分比的侧边栏。在侧边栏内，我想要一个固定在顶部的元素，而如果其他内容占用的垂直空间大于侧边栏高度，则它会滚动。在此示例中，h1 元素保留在父元素的顶
html - CSS 中的 vh 和百分比？
我正在尝试让 .navbar 占据屏幕的一半，但它没有正确显示。我不确定为什么？我猜还有另一个容器，但我不确定为什么？我将 body 设置为 100vh 以覆盖屏幕我有 .navbar 一半使用百

首页

博学

6Ren·AI

商城

html - 使用 vh 对齐的问题