如何将手风琴中心和横幅底部放置

Question

我必须在页眉上放置一个手风琴，手风琴应该放在页眉的底部和中心

我想要在桌面视图中这样，它应该是响应式的。

header{
    padding: 2em;
    background-color: #b0b6de;
    height: 100px;
}


nav{
    background-color: white;
    text-align: center;
    margin: 0 auto;
}

ul.links{
    list-style-type: none;
    padding: 4px;
    display: -webkit-inline-box;   
    margin: 0px auto;
}
.links li{
    border: 1px solid;
    padding: 3rem 3rem;   
    min-width: 150px;    
}

<div class="wrapper">
            <header>
            </header>
        </div>
            <nav class="nav">
                <ul class="links">
                   <li>test test test</li>
                   <li>test test test</li>
                   <li>test test test</li>            
                   <li>test test test</li>     
                   <li>test test test</li>                            
                </ul>
            </nav>

注意：横幅或 wrapper 是动态的可能会更改任何 class

Answer 1

你可以使用这个例子：

*, *:before, *:after {
   margin: 0;
   padding:0;
  }
  body {
   width: 100vw;
   position: relative;
  }
  .wrapper {
   position:relative;
  }
  header{
   padding: 2em 0;
   background-color: #b0b6de;
   height: 100px;
   position:relative;
   width: 100vw;
  }


  nav{
   text-align: center;
   width: 100%;
   margin: -70px auto 0 auto;
   z-index: 2;
   position:relative;
  }

  ul.links{
   list-style-type: none;
   padding: 4px;
   display: -webkit-inline-box;
   margin: 0px auto;
   display: flex;
   justify-content: center;
   max-width: 800px;
   background: #fff;
  }
  .links li{
   border: 1px solid;
   padding: 3rem 20px;   
   max-width: 150px;
   flex:1;
  }

<div class="wrapper">
            <header>
            </header>
        </div>
            <nav class="nav">
                <ul class="links">
                   <li>test test test</li>
                   <li>test test test</li>
                   <li>test test test</li>
                   <li>test test test</li>
                   <li>test test test</li>
                </ul>
            </nav>

如何将手风琴中心和横幅底部放置

How to place accordion center and on bottom of ther banner

html

css

responsive-design