标头项不会并排对齐

Question

I'm trying to align the li items in the header side by side. However, when I define the ul & li with inline display & left float What I'm trying to achieve does not occur leaving the li items still stacked vertically rather than side by side horizontally?

 * { 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

Your list items stack vertically because of this:

* {
    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;
}

Each list item - everything for that matter - has a width of 100%, so they're forced to stack. It may be more prudent to consider placing width:100%; on a class, or some other means to target elements. * is generally used for an absolute reset of default styles.