文本不出现标题

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

<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-->

来源

2017-07-25 Brian Aquino

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

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

你必须NEST标签！即

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

修复这个问题，看看你在哪里。

来源

2017-07-25 20:57:39 cbrauns

你有一些在你的代码混淆了标签的，我试图清除它

<!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>

来源

2017-07-25 20:58:45 stephan14x

的一段是头以上，因为.topnav有position:fixed。将其设置为position:relative将解决您的问题。

这里是你的代码的清理版本的jsfiddle： https://jsfiddle.net/fv73pwym/1/

来源

2017-07-25 21:02:34 Eric

文本不出现标题

回答

相关问题