CSS Navigation bar should Never leave the row and the relative text

Question

在发现我犯了愚蠢的语法错误后 sub-menu 我编辑了我的文件。我有两个问题无法解决：

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

我不明白，为什么 navi-elements 开始堆叠。我仔细看了看编程文档scalable...我忘了什么？另外，我怎样才能让这 5 个元素使用 90% 的全部 100% body?
如果我尝试设置 ul.navi 的 font-size 绝对值 (px)，当我缩放 window 时，文本会消失。

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

是否可以根据 button-borders li 所在的位置缩放单词？

问题截图，几乎全屏：

较小：

这是我的代码：

/* 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 将在 project-folder 中。在此文件夹中将有一个 "CSS" 文件夹，我的 CWAllgemeinStyle.css 就在其中。

Answer 1

你在使用浮动吗？

要停止堆栈，请尝试在您的 CSS 中使用它。

粘贴时删除注释，您的CSS应该可以工作

.class {
  position: relative;
  top: 0;
  width: 100%;
  height:  auto;
  max-width: 10vh;
  max-height: 5vh;
  right: 1vh; //or any value u want
  margin:0 0 0 0;
  overflow: auto; // to bring out nav if max height is reached
}

Answer 2

它会换行，因为元素不能收缩以打断 link 文本，但是它可能会打断列表，因为有多个列表元素。并且文本的收缩速度比页面宽度的收缩速度慢。就个人而言，我不会使用 window 实时缩放字体，我会使用媒体查询 (https://www.w3schools.com/css/css_rwd_mediaqueries.asp) for different screens and devices. And for positioning I usually use 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;
  }
}

CSS Navigation bar should Never leave the row and the relative text

CSS Naviagtion bar should Never leave the row and the relative text

html

css

css-position

navbar

text-size