问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

html <div>嵌套的<p>内容不显示

头像
小石头
    26612040
    头像
    清蒸不是水煮
      3.1k21026
      <!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>
      javascriptsasshtml5
      阅读 4k
      3 个回答
      得票最新
      头像
      boxsnake
        6.8k21249
        ✓ 已被采纳

        先上一张图：
        clipboard.png

        浏览器打开审查元素，这个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>

        效果：
        clipboard.png

        头像
        kumfo
        6.7k33257

        在你自己写的style里

        <style type="text/css">
        main header{
        background:#aaa;
        color: #fff;
        }
    </style>

        加上 margin-top:50px;

        <style type="text/css">
        main header{
        background:#aaa;
        color: #fff;
        margin-top:50px;
        }
    </style>

        因为你的头部是position fixed的。

        头像
        梦梦她爹
          1.8k1614

          看到.navbar-fixed-top的position是fixed，所以<main>元素感知不到其存在被排到页面最上面，被.navbar-fixed-top遮盖掉了。

          你可以把<header class="navbar navbar-inverse navbar-fixed-top">用一个<div>包裹起来，将这个div的height设置成和<header>的height一致，从而把下面的<main>元素挤下去。

          ...
<div style="height: 51px;">
    <header class="navbar navbar-inverse navbar-fixed-top">
        ...
    </header>
</div>
...
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题