时间戳

首页 > 解决方案 >

javascript -

问题描述

我正在制作一个网页，该网页需要在顶部有一个导航菜单，每个部分都有一个标题，使用

<h1>

元素。问题是，当我写标题时，导航消失了。使用

tabTitle {
margin-top: 500px;
}

在 CSS 中只是使页面上的标题更低，并且导航仍然缺失。我怎样才能解决这个问题？

这是代码：

<!doctype html>
<html>
    <head>
        <meta-charset="utf-8">
        <title>Title</title>
    </head>
    <body>
<div id="top-menubar">
            <nav>
                <a href=tab1.html">1</a> |
                <a href="tab2.html">2</a> |
                <a href="tab3.html">3</a> |
                <a href="tab4.html">4</a> |
                <a href="tab5.html">5</a> 
            </nav>
<h1 id="tabTitle">Tab 5</h1>
    </body>
</html>
<style>
body {
    font-family: 'Roboto Condensed', sans-serif;
}
 #top-menubar {
font-family: 'Oswald', sans-serif;
float: none;
position: absolute;
left: 50%;
z-index: 1;
transform: translate(-50%, -50%);
text-transform: uppercase;
margin-top: 25px;
color: black;
}
a:link {
  text-decoration: none;
  color: black;
  opacity: 100% !important;
}

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

a:hover {
  text-decoration: none;
  color: black;
  transform: scale(2, 3) !important;
  border-style: solid;
  border-color: #b5b5b5;
  background-color: #b5b5b5;
}

a:active {
  text-decoration: none;
  color: black;
}
#tabTitle {
margin-top: 500px;
}
</style>

回答： 显然，这可以通过应用

position: absolute;

标记到标题。

标签： javascripthtmlcssnav

解决方案

猜猜这可能会对您有所帮助，并且无需将位置定义为绝对

  * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

#top-menubar {
  font-family: 'Oswald', sans-serif;
  float: none;
  /*
position: absolute;
left: 50%;
*/
  z-index: 1;
  /* transform: translate(-50%, -50%); */
  text-transform: uppercase;
  /* margin-top: 25px; */
  color: black;
  /**/
  padding: 25px 0 0 0;
  background: darkcyan;
  width: 100%;
  height: 70px;
  text-align: center;
}

a:link {
  text-decoration: none;
  color: black;
  opacity: 100% !important;
  /* added */
  padding: 10px;
  margin: 15px;
}

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

a:hover {
  text-decoration: none;
  color: black;
  transform: scale(2, 3) !important;
  border-style: solid;
  border-color: #b5b5b5;
  background-color: #b5b5b5;
}

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

#tabTitle {
  /* margin-top: 500px; */
  /* added */
  margin: 80px 210px;
<body>
  <div id="top-menubar">
    <nav>
      <a href="tab1.html">1</a> |
      <a href="tab2.html">2</a> |
      <a href="tab3.html">3</a> |
      <a href="tab4.html">4</a> |
      <a href="tab5.html">5</a>
    </nav>
  </div>
  <h1 id="tabTitle">Tab 5</h1>
</body>

推荐阅读