javascript - html <div>嵌套的<p>内容不显示
本文介绍了javascript - html <div>嵌套的<p>内容不显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Build a Personal Portfolio Webpage</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="D:/web/rule/bootstrap-Normalize.css">
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="./style.css">
<style type="text/css">
main header{
background:#aaa;
color: #fff;
}
</style>
</head>
<body>
<header class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<nav class="navbar-collapse collapse" id="navbar" role="navigation style=" height: 11px; ">
<ul class="nav navbar-brand navbar-left ">Free Code</ul>
<ul class="nav navbar-nav navbar-right ">
<li class="scrollable "><a href="#top ">About</a></li>
<li class="scrollable "><a href="#portfolio ">Portfolio</a></li>
<li class="scrollable "><a href="#contact ">Contact</a></li>
</ul>
</nav>
</div>
</header>
<!-- end header-->
<main>
<header>
<div class="intro-text">
<p>
Front-End Developer and UX/UI designer, with practical experience in project management, branding strategy, and creative direction; devoted to functional programming and information architecture.
</p>
<hr class="star-bright">
<<pseudo:after>></<pseudo:after>>
</hr>
<span class="skills">Web Developer - User Experience Designer - Graphic Artist</span>
</div>
</header>
</main>
<footer>
</footer>
</body>
</html>解决方案
先上一张图：
浏览器打开审查元素，这个p的位置如图，由于你头部的header加了.navbar-fixed-top CSS 类，而这个类带有position: fixed属性，所以你的p元素被上面一个header元素盖住了。
解决方法是，给下部main部分加上一个上边距，等于头部header的高度，这样就可以把头部header的位置空出来了，也就不会被头部header挡住p元素了。
<style type="text/css">
main header {
background:#aaa;
color: #fff;
margin-top: 51px;
}
</style>效果：
这篇关于javascript - html <div>嵌套的<p>内容不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
