如何将 "Audio" 设置为高于 "Diameter 18mm"

Question

这是我的项目 https://jsfiddle.net/9rkfst5a/1/ 我怎样才能让 h1 在 ul 之上而不是彼此相邻？

let slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("dot");
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active";
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden
}

body {
  font-family: 'SamsungOne', sans-serif;
}

a {
  color: black;
  text-decoration: none;
}

.product {
  position: absolute;
  margin-top: 25px;
  display: flex;
  flex-direction: row;
  color: black;
}

.product ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  font: 50;
}

.product li {
  display: flex;
  flex-direction: row;
  margin-right: 50px;
}

.product ul #product-naam {
  font-size: xx-large;
  margin-left: -10px;
}

#ScrollToTop {
  position: fixed;
  right: 25px;
  bottom: 55px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: black;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  color: white;
  outline: none;
  border: none;
  cursor: pointer;
  z-index: 1;
}

#ScrollToTop:hover {
  background: white;
  color: black;
}

.logo {
  position: relative;
  top: 20px;
  left: 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.menubalk {
  display: flex;
  flex-direction: row;
  color: black;
  align-items: center;
}

.menubalk li {
  display: flex;
  flex-direction: row;
  margin-right: 50px;
}

.name {
  position: absolute;
  margin-top: 100px;
}

.slideshow-container {
  max-width: 853px;
  position: relative;
  margin: auto;
}

.mySlides {
  display: none;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: black;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.411);
}

.fade {
  animation-name: fade;
  animation-duration: 1s;
}

@keyframes fade {
  from {
    opacity: .7
  }
  to {
    opacity: 1
  }
}

.achtergrond {
  background-color: black;
  color: white;
  display: block;
  box-sizing: border-box;
}

.specs {
  position: relative;
  top: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.cat {
  margin-right: auto;
  margin-left: auto;
}

.info {
  display: flex;
  flex-direction: row;
  color: black;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}

.info li {
  display: flex;
  flex-direction: row;
  margin-right: 200px;
  margin-left: 200px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="Images/logo-square-letter.png">
  <link rel="stylesheet" href="buds-2.css" type="text/css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="http://fonts.cdnfonts.com/css/samsungone" rel="stylesheet">
  <title>Samsung Galaxy Buds 2</title>
</head>

<body>
  <button id="ScrollToTop">
    <i class="material-icons">arrow_upward</i>
</button>
  <script>
    const ScrollToTop = document.querySelector("#ScrollToTop");

    ScrollToTop.addEventListener("click", function() {
      window.scrollTo(0, 0);
    });
  </script>
  <header>
    <div class="logo">
      <a href="index.html"><img src="Images/samsung-logo.png" alt="Samsung Logo" width="150"></a>
      <ul class="menubalk">
        <a href="mailto:thomas.lisabeth@sintjozefbrugge.be" target="_blank">
          <li>Contact</li>
        </a>
        <a href="index.html#assortiment">
          <li>Assortiment</li>
        </a>
      </ul>
    </div>
  </header>

  <div class="product">
    <ul>
      <li id="product-naam"><strong>Galaxy Buds 2</strong></li>
      <a href="#info">
        <li>test</li>
      </a>
    </ul>
  </div>

  <div class="slideshow-container">
    <div class="mySlides fade">
      <img src="Images/Buds2-1.jpg" width="853">
    </div>

    <div class="mySlides fade">
      <img src="Images/Buds2-2.jpg" width="853">
    </div>

    <div class="mySlides fade">
      <img src="Images/Buds2-3.jpg" width="853">
    </div>

    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
  </div>
  <br>
  <br>
  <div class="specs">
    <h1 class="cat">Audio</h1>
    <ul class="info">
      <li>Diameter</li>
      <li>18mm</li>
    </ul>
  </div>
</body>

</html>

Answer 1

有很多方法，但简单快捷的方法是将它们从 HTML 的流程中剔除，这样它们就不会包含在规格 class 中，然后将填充设置为 0所以信息不会继承它。

html {
  scroll-behavior: smooth;
  overflow-x: hidden
}

body {
  font-family: 'SamsungOne', sans-serif;
}

a {
  color: black;
  text-decoration: none;
}

.product {
  position: absolute;
  margin-top: 25px;
  display: flex;
  flex-direction: row;
  color: black;
}

.product ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  font: 50;
}

.product li {
  display: flex;
  flex-direction: row;
  margin-right: 50px;
}

.product ul #product-naam {
  font-size: xx-large;
  margin-left: -10px;
}

#ScrollToTop {
  position: fixed;
  right: 25px;
  bottom: 55px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: black;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  color: white;
  outline: none;
  border: none;
  cursor: pointer;
  z-index: 1;
}

#ScrollToTop:hover {
  background: white;
  color: black;
}

.logo {
  position: relative;
  top: 20px;
  left: 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.menubalk {
  display: flex;
  flex-direction: row;
  color: black;
  align-items: center;
}

.menubalk li {
  display: flex;
  flex-direction: row;
  margin-right: 50px;
}

.name {
  position: absolute;
  margin-top: 100px;
}

.slideshow-container {
  max-width: 853px;
  position: relative;
  margin: auto;
}

.mySlides {
  display: none;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: black;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.411);
}

.fade {
  animation-name: fade;
  animation-duration: 1s;
}

@keyframes fade {
  from {
    opacity: .7
  }
  to {
    opacity: 1
  }
}

.achtergrond {
  background-color: black;
  color: white;
  display: block;
  box-sizing: border-box;
}

.specs {
  position: relative;
  top: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.cat {
  margin-right: auto;
  margin-left: auto;
}

.info {
  display: flex;
  flex-direction: column;
  color: black;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}

.info li {
  display: flex;
  flex-direction: row;
  margin-right: auto;
  margin-left: auto;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="Images/logo-square-letter.png">
  <link rel="stylesheet" href="buds-2.css" type="text/css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="http://fonts.cdnfonts.com/css/samsungone" rel="stylesheet">
  <title>Samsung Galaxy Buds 2</title>
</head>

<body>
  <button id="ScrollToTop">
      <i class="material-icons">arrow_upward</i>
    </button>
  <script>
    const ScrollToTop = document.querySelector("#ScrollToTop");

    ScrollToTop.addEventListener("click", function() {
      window.scrollTo(0, 0);
    });
  </script>
  <header>
    <div class="logo">
      <a href="index.html"><img src="Images/samsung-logo.png" alt="Samsung Logo" width="150"></a>
      <ul class="menubalk">
        <a href="mailto:thomas.lisabeth@sintjozefbrugge.be" target="_blank">
          <li>Contact</li>
        </a>
        <a href="index.html#assortiment">
          <li>Assortiment</li>
        </a>
      </ul>
    </div>
  </header>

  <div class="product">
    <ul>
      <li id="product-naam"><strong>Galaxy Buds 2</strong></li>
      <a href="#info">
        <li>test</li>
      </a>
    </ul>
  </div>

  <div class="slideshow-container">
    <div class="mySlides fade">
      <img src="Images/Buds2-1.jpg" width="853">
    </div>

    <div class="mySlides fade">
      <img src="Images/Buds2-2.jpg" width="853">
    </div>

    <div class="mySlides fade">
      <img src="Images/Buds2-3.jpg" width="853">
    </div>

    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
  </div>
  <br>
  <br>
  <div class="specs">
    <h1 class="cat">Audio</h1>
  </div>
  <ul class="info">
    <li>Diameter</li>
    <li>18mm</li>
  </ul>
</body>

</html>

如何将 "Audio" 设置为高于 "Diameter 18mm"

How do I set "Audio" above "Diameter 18mm"

html

javascript

css