標頭項不會並排對齊

Question

我正在嘗試並排對齊標題中的li項目。 但是，當我用內聯顯示和左浮點定義ul＆li時，我試圖實現的目的是不會使li項仍然垂直堆疊而不是水平並排堆疊嗎？

 * { margin: 0; padding: 0; width: 100%; margin: 0; list-style: none; text-decoration: none; font-size: 1em; font-family: Helvetica Neue, Helvetica,Arial,Sans-serif; } a { background: transparent; border: none; letter-spacing: 0.15em; text-transform: uppercase; transition: .3s color; transition: .3s height; } header { display: block; position: fixed; height: 80px; width: 100%; } .header-wrapper { width: 100%; height: 100%; background: transparent; } .header-bg, .header-content { position: fixed; top: 0; left: 0; width: 100%; text-align: center; } .header-bg { color: gray; background: white; border-bottom: 1px solid black; transition: .3s height; height: 0; } .header-content { transition: .3s color; color: white; background: transparent; height: 80px; transition: .3s height; overflow: hidden; list-style: none; } ul { list-style-type: none; margin: 0; padding: 0; } li { display: inline-block; float:left; } .navBarLinks { color: inherit; cursor: pointer; font-size: .8em; letter-spacing: 0.05em; transition: .3s color; } content { display: block; height: 2000px; background: orange; } .stage { color: #fff; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 100vh; background: white; border-bottom: 1px solid black; font-size: 48px; height: 200px; width: 100%; } .stage-0 { background: grey; height: 400px; } 

 <header> <div class="header-wrapper"> <div class="header-bg"></div> <div class="header-content"> <ul id="horizontal-list"> <li class="instagram"> <a href="" class="navBarLinks">Social Icon</a></li> <li class="home"><a href="" class="navBarLinks">Logo </a></li> <li class="hamburger"><a href="" class="navBarLinks">Hamburger</a></li> </ul> </div> </div> </header> <content> <div class="stage stage-0">1</div> <div class="stage stage-2">3</div> <div class="stage stage-4">5</div> <div class="stage stage-6">7</div> <div class="stage stage-8">9</div> <div class="stage stage-10">11</div> <div class="stage stage-12">13</div> <div class="stage stage-14">15</div> <div class="stage stage-16">17</div> <div class="stage stage-18">19</div> <div class="stage stage-20">21</div> <div class="stage stage-22">23</div> </content> 

Answer 1

由於以下原因，您的列表項垂直堆疊：

* {
    margin: 0;
    padding: 0;
    width: 100%; /*right here*/
    margin: 0;
    list-style: none;
    text-decoration: none;
    font-size: 1em;
    font-family: Helvetica Neue, Helvetica,Arial,Sans-serif;
}

每個列表項-與此相關的所有內容 -的寬度均為100％，因此它們被迫堆疊。 考慮放置width:100%;可能更謹慎width:100%; 在類上，或以其他方式定位元素。 *通常用於默認樣式的絕對重置。