时间戳

首页 > 解决方案 > 我不知道如何在它之前的文本下获取此文本

html - 我不知道如何在它之前的文本下获取此文本

问题描述

我正在尝试让此文本 ,#contact显示在页面的主标题下方。但它只是显示在顶部，我尝试过使用和不使用对齐功能。

这是代码。

        body.navbartext, html{
        margin:0px;
        overflow-x:hidden;
        font-family:helvetica;
        height:1080px;
    }

    ul.navbartext{
        list-style:none;
        padding:5px;
        display: block;
        width:100%;
        box-shadow: 1px 2px 40px #ccc;
        margin:0px;
    }

    a.navbartext{
        text-decoration: none;
        font-size:15px;
        color: black;
    }

    li.navbartext{
        display:inline-block;
        margin: 10px;
    }

    div.mainpagetitle{
        height: 200px;
        width: 400px;
        background: black;
        position: fixed;
        top:50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -200px;
    }

    body.mainpagetitle{
        padding: 0;
        margin: 0;
    }

    h1.mainpagetitle{
        font-size: 4em;
        margin: 0;
        padding: 0;
        text-align: center;
        font-family: helvetica;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }

    #subtitle {
        font-size: 2em;
        margin: 0;
        padding: 0;
        text-align: center;
        font-family: Roboto;
        position: absolute;
        top: 59%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }

    #contact {
        top: 0%;
    }
<body>
  <div>
    <ul class="navbartext">
      <li class="navbartext"><a class="navbartext" href="">Home</a></li>
      <li class="navbartext"><a class="navbartext" href="">Youtube</a></li>
      <li class="navbartext"><a class="navbartext" href="">Github</a></li>
      <li class="navbartext"><a class="navbartext" href="">Roblox</a></li>
      <li class="navbartext"><a class="navbartext" href="#contact">Contact</a></li>
    </ul>
  </div>
  <header>
    <h1 class="mainpagetitle">Web Dev, Game Dev</h1>
    <h2 id="subtitle">Subtitle</h2>
  </header>
    <div id="contact"><a href="contact">Contact Info</a></div>
</body>

标签： htmlcss

解决方案

您可以用适合您的值或任何值 替换top: 0%of #contact（它没有任何效果，因为position既不是绝对的，也不是固定的或相对的） 。margin-top: 60%;这会将其移动到绝对定位的元素下方，这些元素不是 文档流的一部分，因此可以与其他元素重叠。

但是，以您的方式使用绝对定位的元素确实没有意义。一般来说，您应该以不同的方式排列代码（即不使用那些绝对位置）

body.navbartext,
html {
  margin: 0px;
  overflow-x: hidden;
  font-family: helvetica;
  height: 1080px;
}

ul.navbartext {
  list-style: none;
  padding: 5px;
  display: block;
  width: 100%;
  box-shadow: 1px 2px 40px #ccc;
  margin: 0px;
}

a.navbartext {
  text-decoration: none;
  font-size: 15px;
  color: black;
}

li.navbartext {
  display: inline-block;
  margin: 10px;
}

div.mainpagetitle {
  height: 200px;
  width: 400px;
  background: black;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -200px;
}

body.mainpagetitle {
  padding: 0;
  margin: 0;
}

h1.mainpagetitle {
  font-size: 4em;
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: helvetica;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

#subtitle {
  font-size: 2em;
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: Roboto;
  position: absolute;
  top: 59%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

#contact {
  margin-top: 60%;
}
<div>
  <ul class="navbartext">
    <li class="navbartext"><a class="navbartext" href="">Home</a></li>
    <li class="navbartext"><a class="navbartext" href="">Youtube</a></li>
    <li class="navbartext"><a class="navbartext" href="">Github</a></li>
    <li class="navbartext"><a class="navbartext" href="">Roblox</a></li>
    <li class="navbartext"><a class="navbartext" href="#contact">Contact</a></li>
  </ul>
</div>
<header>
  <h1 class="mainpagetitle">Web Dev, Game Dev</h1>
  <h2 id="subtitle">Subtitle</h2>
</header>
<div id="contact"><a href="contact">Contact Info</a></div>

推荐阅读