1
我試圖對齊標題中的li項目並排。但是,當我定義ul & li與內聯顯示&左浮動我試圖實現不會發生離開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>
如何讓你的li有顯示:inline?而不是顯示內聯塊 – HTMLNoob