首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >为什么我的导航栏将我的全部内容推到一边?

为什么我的导航栏将我的全部内容推到一边?
EN

Stack Overflow用户
提问于 2018-06-10 00:08:11
回答 1查看 50关注 0票数 1

我有三个部分。一个是导航栏,第二个是div,它是bg,基本上是一个条纹背景,第三个是div中的内容(标题,信息框等)

当我放置导航栏时,它会将我的所有内容推到右边,因为它是一个新的div,不知道如何修复它,

通常这是一个简单的修复,也许我有一个艰难的一天,无法弄清楚一段简单的代码。有人能详细解释一下我做错了什么吗?

代码语言:javascript
复制
<div class="nav">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Download</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

    <div class="stripes">
        <span></span>
        <span></span> 
        <span></span> 
        <span></span> 
    </div>

<section id="header">
    <div class="container">
        <div class="header-content">
           <div class="header-header">
                <h1>Lorem Ipsum</h1>    
           </div>
            <div class="header-info">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae assumenda quas tempora totam qui soluta illum dolorem impedit ad, ratione, aspernatur ipsa placeat adipisci molestias id tenetur natus voluptates quis.</p>
            </div>
        </div>
    </div>
</section>
</header>
</body>
</html>

萨斯

代码语言:javascript
复制
$mainBlue: #3CB6FD
$secondBlue: #4A5AFC

html
    height: 100% !important
    font-family: 'Open Sans', sans-serif !important
    -webkit-font-smoothing: antialiased !important
    text-rendering: optimizeLegibility !important

.gridContainer
    display: grid
    grid-template-columns: 100%
    grid-template-areas: "header"

header
    position: relative !important
    display: flex !important

#header
    position: relative
    z-index: 3
    height: 780px
    grid-area: header
    align-items: center
    justify-content: center
    display: flex

.nav
    position: relative
    z-index: 999
    height: auto

    ul
        list-style-type: none

        li
            display: inline-block

            a
                color: white
                text-decoration: none
                display: block
                padding: 1em


.header-content
    margin: 0 auto
    max-width: 60%

.phone-container
    position: absolute
    bottom: 0
    right: 0
    height: 100%
    width: 30%
    display: block
    transform: rotate(-10deg)

.phone
    height: 100%
    width: 100%
    display: block
    background: url(../img/phone.png)
    background-size: contain
    background-repeat: no-repeat
    z-index: 6

.container
    width: 950px
    margin: 0 auto

header .stripes
    background: linear-gradient(to left, $mainBlue , $secondBlue)
    display: block
    height: 100%
    position: absolute
    transform: skewY(-12deg)
    width: 100%
    overflow: hidden
    transform-origin: 0

span
    display: block
    position: absolute
    &:first-child
        background: linear-gradient(to left, $mainBlue , $secondBlue)
        top: 0
        left: 0
        width: 40%
        height: 200px
    &:nth-child(2)
        background: linear-gradient(to left, $mainBlue , $secondBlue)
        bottom: 0
        height: 200px
        width: 50%
        z-index: 2
    &:nth-child(3)
        background: linear-gradient(to left, $mainBlue , $secondBlue)
        bottom: 200px
        height: 130px
        width: 33%
    &:nth-child(4)
        background: linear-gradient(to left, $mainBlue , $secondBlue)
        right: 0
        height: 230px
        width: 53%
        bottom: 0

.header-header
    margin-bottom: 30px

h1
    font-size: 3em
    font-weight: 700
    color: white

p
    font-size: 1em
    font-weight: 400
    color: white
    line-height: 2
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-10 00:57:36

你为什么在你的header中使用display: flex !important?去掉它,你的内容就会恢复正常。如果您希望条带向上移动,那么可以在header .stripes类中使用top: -10px

演示:https://codepen.io/nlshnk95/pen/mKRwMK

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50776136

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档