Question

我尝试对问题进行排查，但无济于事。可能是尺寸不允许我看到我想在标题下方显示的文字吗？这是我的代码。我非常感谢任何见解。该段落不会出现在标题的底部。再次，任何帮助将不胜感激。

<script>
  $(document).ready(function()){
  }); 
</script>

<style>
  .body{
    margin: 0px;    
  }
  .homeButton{
    width: 40px; 
  }
  #MidPort{
    background-image: url("");
    height:750px;
    width:1050px;
    background-size:cover;
  }
  .topnav{
    font-size: 20px;
    font-family: Times New Roman;
    position:fixed;
    top 0;
    width:100%;
  }
  #bg2{
    background-color:red; 
  }  
  ul{
    list-style-type:none;
    margin:0;
    padding:0;
    overflow: hidden;
    background-color: #333
  }
  li{
    float:left;
    border-right:1px solid #bbb;   
  }    
   li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  li a:hover {
    background-color: red;
  }       
  .active{
    background-color:#4CAF50;
  }
  li a:hover:not(.active) 
  {
    background-color: #111; 
  }
  li:last-child{
    border-right:none;
  }
</style>

<!-- Check to see if the navigation bar remains at the bottom if I use the nav class instead of ul. If not, revert back to ul for when the user scrolls down-->

<div>
  <header>
    <!--<div class="container">-->
    <h2 class="topnav" id="cs2">
      <ul>
        <li><a class="active" href="/home">Home</li></a>
        <li><a  href="/About me">About Me</li></a>
        <li><a href="Contact">Contact</li></a>
      </ul>
    </h2>
  </header>
</div>
<main>
  <header>
    <div class="intro-text">
      <p>Front-End Developer and Economist, with experience in project management, machine learning, and leadership roles; devoted to functional programming and analyzing mathematical models to solve ongoing economic</p>
    </div>
  </header>
</main>
<!--setup a home button at the bottom-->

Answer 1

首先，这是可怕的HTML！你永远不应该有这样的标签：

<a><b></a></b>

你必须有NEST标签!!即。

<a><b></b></a>

解决这个问题，看看你在哪里。

Answer 2

您的代码中有许多混合标记，我尝试清理它

<!DOCTYPE html>
<html lang="en">
<head>
<script>
</script>

<style>
  .body{
    margin: 0px;
  }

  .homeButton{
    width: 40px;
  }

  #MidPort{
    background-image: url("");
    height:750px;
    width:1050px;
    background-size:cover;
  }

  .topnav{
    font-size: 20px;
    font-family: Times New Roman;
    position:fixed;
    top 0;
    width:100%;
  }

  #bg2{
    background-color:red;
  }  

   ul{
     list-style-type:none;
     margin:0;
     padding:0;
     overflow: hidden;
     background-color: #333
 }

  li{
    float:left;
    border-right:1px solid #bbb;
  }    

   li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: red;
}

  .active{
    background-color:#4CAF50;
    }
   li a:hover:not(.active) 
  {
    background-color: #111; 
   }
  li:last-child{
    border-right:none;
  }
</style>
</head>

<!-- Check to see if the navigation bar remains at the bottom if I use the nav class instead of ul. If not, revert back to ul for when the user scrolls down-->
<body>


<div>
<header>
    <div class="topnav" id="cs2">
      <ul>
        <li><a href="/home" class="active" >Home</a></li>
        <li><a href="/About me" >About Me</a></li>
        <li><a href="Contact" >Contact</a></li>
      </ul>
    </div>
</header>
   </div>
     <main>
     <header>
    <div class="intro-text">  


    <p>Front-End Developer and Economist, with experience in project management, machine learning, and leadership roles; devoted to functional programming and analyzing mathematical models to solve ongoing economic</p>

    </div>
      </header>

     </main>
    <!--setup a home button at the bottom-->
    </body>
</html>

Answer 3

该段落在标题上方，因为.topnav具有position:fixed。将其设置为position:relative将解决您的问题。

这是一个带有清理版代码的jsfiddle： https://jsfiddle.net/fv73pwym/1/

文字未显示标题

3 个答案: