html - 如何将 Accordion 中心和横幅底部放置

Question

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

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

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 是动态的，可以更改任何类

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>