个人中心
gpt4 book ai didi

html - CSS 导航栏不应该离开行和相关文本

转载 作者：行者123 更新时间：2023-11-28 02:40:52 26 4
gpt4 key购买 nike

在发现我做子菜单的愚蠢语法错误后，我编辑了我的文件。我很难解决 2 个问题:

当我调整浏览器窗口大小时检查是否可以在每个帧大小上观看我的一侧(在 PC 上观看我的 HTML 端，稍后在移动设备上，...)

  1. 我不明白，为什么导航元素开始堆叠。我仔细看了看编程文档scalable...我忘了什么？还有如何让这 5 个元素使用整个 100% 的 90% 主体？

  2. 如果我尝试将 ul.navi 的字体大小设置为绝对值 (px)，当我将窗口缩放得太小时，文本将会消失。

如果我将它设置为相对 (vw)，它将变得不可读。我尝试了一个组合:font-size: calc(2px + 1vw)。它更好，但不完全是我想要的。

是否有可能用按钮边框 li 所在的位置缩放单词？

问题截图，几乎全屏:

nearly fullscreen

更小:

small enough for the mistake

这是我的代码:

/* CSS Style für Kletterwelt - Allgemeine Inhalte v1.02 vom 17.06.2017 */

/* Allgemeine Daten & Einstellungen */

* {
  margin: 0px;
  padding: 0px;
}

body {
  /* Für den Gesamten Inhalt gilt */
  width: 90vw;
  /* relativ auf Fenstergröße! */
  margin: auto;
  /* Für den Text des gesamten Inhaltes gilt */
  font-family: arial;
}

img {
  width: 100%;
  /* Gilt für ALLE Bilder auch später im Content*/
}


/* Navigationsleiste */

ul.navi {
  list-style-type: none;
  width: 100%;
  font-size: calc(2px + 1vw);
  /* relativ zur Fenstergröße!!! */
}

ul#hauptmenu li {
  width: 19%;
  /* Aufteilung der Hauptmenüpunkte. relative zur body-Größe! */
  position: relative;
  /* Untermenüs werden relativ zu ihrem Hauptmenüpunkt zugeordnet */
  float: left;
  /* Buttons werden nebeneinander angezeigt */
  margin-right: 1px;
  /* Abstand zwischen den Hauptmenü-Buttons*/
  border: 2px solid #333333;
  /* Listenelemente haben sichtbaren Rand */
  border-radius: 5px;
  /* Rand abrunden */
}

ul#hauptmenu a {
  display: block;
  /* gesamtes Listenelement wird zum anklickbaren Button, nicht nur das Wort */
  height: 40px;
  line-height: 40px;
  /* Wenn Wert mit "height" identisch ist, ist Text vertikal zentriert */
  background-color: #333333;
  text-decoration: none;
  /* Entfernt Unterstriche der Links */
  text-align: center;
  color: white;
  font-weight: bold;
}

ul#untermenu li {
  width: 100%;
  /* Untermenüpunkte sind relativ! Also sollen sie die voll zur verfügung stehende Länge nutzen */
}

ul#untermenu a {
  width: 100%;
  /* Untermenüpunkte sind relativ! Also sollen sie die voll zur verfügung stehende Länge nutzen */
}

ul#hauptmenu li:hover>a {
  background-color: #777777;
  /* markiert Buttons übergeordneter Menüs UND den Button, über den man hovert, grau */
}

ul#hauptmenu li:hover a:hover {
  background-color: #FF0000;
  /* markiert Button, über den man hovert, rot (überschreibt Definition)*/
}

ul#hauptmenu ul#untermenu {
  display: none;
  /* Untermenüpunkte standardmäßig ausblenden*/
  position: absolute;
  width: 100%;
}

ul#hauptmenu li:hover #untermenu {
  display: block;
  /* beim Hovern über übergeordneten Menü, soll das untergeordnete eingeblendet werden */
  z-index: 500;
  /* Untermenüpunkte werden über dem Content angezeigt (Ebenen-technisch) */
}
<!-- Kletterwelt - Home v1.06 vom 16.06.2017 -->
<!DOCTYPE HTML>
<html lang="de">

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="Florian Zimmermann, Rudolf Geist & Thomas Kretzer" content="HTML-Projekt: Kletterwelt">

  <link rel="stylesheet" type="text/css" href="./css/CWAllgemeinStyle.css">
  <link rel="stylesheet" type="text/css" href="./css/CWContentStyle.css">

  <link rel="icon" href="./bilder/icon.ico">
  <title>Kletterwelt - Home</title>
</head>

<body>
  <header>
    <img src="./bilder/headerbild.jpg">

    <!--Hinweis zu Navis! Untermenüs stehen innerhalb der Klammern eines Listenelements li !!! -->
    <ul class="navi" id="hauptmenu">
      <li><a href="#">HOME</a>
        <ul class="navi" id="untermenu">
          <li><a href="#">NEWS</a></li>
        </ul>
      </li>
      <li><a href="#">VIDEOS</a></li>
      <li><a href="#">SCHWIERIGKEITSGRADE</a></li>
      <li><a href="#">SICHERUNGSGERÄTE</a>
        <ul class="navi" id="untermenu">
          <li><a href="#geräteart1">DINGER</a></li>
          <li><a href="#geräteart2">TEILE	</a></li>
        </ul>
      </li>
      <li><a href="#">ALLGEMEINES</a></li>
    </ul>
  </header>

  <main>
    <img class="mySlides" src="egal" style="width:100%">
    <!-- doesent matter now -->
  </main>
</body>

</html>

注意:我的 index.html 将在元素文件夹中。在此文件夹中将有一个“CSS”文件夹，我的 CWAllgemeinStyle.css 就在其中。

最佳答案

它会换行，因为元素不能收缩以破坏链接文本，但是它可能会破坏列表，因为有多个列表元素。并且文本的收缩速度比页面宽度的收缩速度慢。就个人而言，我不会使用窗口实时缩放字体，我会为不同的屏幕和设备使用媒体查询 ( https://www.w3schools.com/css/css_rwd_mediaqueries.asp ) 创建断点。对于定位，我通常使用 flexbox ( https://www.w3schools.com/css/css3_flexbox.asp )。下面是在您的 HTML 文档中同时使用这两种方法的示例:

<!DOCTYPE HTML>
<html lang="de">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
    <meta name="Florian Zimmermann, Rudolf Geist & Thomas Kretzer" content="HTML-Projekt: Kletterwelt">

    <link rel="stylesheet" type="text/css" href="styles.css">

    <link rel="icon" href="./bilder/icon.ico">  
    <title>Kletterwelt - Home</title>
</head>

<body>
    <header>        
        <img src="./bilder/headerbild.jpg">

        <!--Hinweis zu Navis! Untermenüs stehen innerhalb der Klammern eines Listenelements li !!! -->
        <ul class="navi navi-top">
            <li><a href="#">HOME</a>
                <ul class="navi navi-bottom">
                    <li><a href="#">NEWS</a></li>
                </ul>
            </li>
            <li><a href="#">VIDEOS</a></li>
            <li><a href="#">SCHWIERIGKEITSGRADE</a></li>
            <li><a href="#">SICHERUNGSGERÄTE</a>
                <ul class="navi navi-bottom">
                    <li><a href="#geräteart1">DINGER</a></li>
                    <li><a href="#geräteart2">TEILE </a></li>
                </ul>
            </li>   
            <li><a href="#">ALLGEMEINES</a></li>
        </ul>
    </header>

    <main>
            <img class="mySlides" src="egal" style="width:100%">
      <!-- doesent matter now -->       
    </main>
</body>
</html>

还有 CSS:

html,
body {
  background: white;
  font-size: 12px;
  padding: 0;
  margin: 0 5%;
}
.navi {
  display: -webkit-flex;
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}
.navi-top {
  -webkit-flex-direction: column;
  flex-direction: column;
}
.navi > li {
  -webkit-flex: 1;
  flex: 1;
  background: black;
  border-radius: 0.3rem;
  margin: 0.1rem;
  position: relative;
}
.navi-top > li:hover > .navi-bottom {
  display: -webkit-flex;
  display: flex;
}
.navi-bottom {
  display: none;
  -webkit-flex-direction: column;
  flex-direction: column;
  width: 100%;
  padding: 0;
  position: relative;
}
.navi-bottom li {
  width: 100%;
  padding: 0;
  margin: 0 auto;
}
.navi a {
  display: block;
  background: #333333;
  color: white;
  text-align: center;
  padding: 1rem;
  border-radius: 0.3rem;
  margin: 0.2rem;
}
.navi a:hover {
  background: #FF0000;
}
@media only screen and (min-width: 750px) {
  html,
  body {
    font-size: 16px;
  }
  .navi-top {
    -webkit-flex-direction: row;
    flex-direction: row;
  }
  .navi-bottom {
    position: absolute;
  }
}

关于html - CSS 导航栏不应该离开行和相关文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44608190/

26 4 0
文章推荐： c++ - 从 Unix 应用程序并行启动/停止应用程序
文章推荐： c++ - Luabind 编译时错误 Unable to deduce template argument
文章推荐： c++ - 是否可以在 C++ 的 Mutator 中使用 Mutator？
文章推荐： c++ - 用 cin 缓冲区做东西直到空
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com