＆＃34;找到我＆＃34; ＆安培; ＆＃34;在＆＃34;正在堆叠在彼此的顶部，它们应该并排排列。
如何上课：find＆amp; in内嵌li内嵌ul的内联显示内联{/ 1}}
非常感谢帮助搞清楚这一点。
* {
margin: 0;
padding: 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 {
position: fixed;
height: 50px;
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: 50px;
transition: .3s height;
overflow: hidden;
list-style: none;
}
ul {
width:100%;
}
li {
padding-top: 15px;
display:inline-block;
*display:inline; /*IE7*/
*zoom:1; /*IE7*/
margin-right:50px;
}
.navBarLinks {
color: inherit;
cursor: pointer;
font-size: .8em;
letter-spacing: 0.05em;
transition: .3s color;
padding-top: 15px;
}
.instagram{
float:left;
padding-left:50px;
}
.hamburger {
float:right;
padding-right:50px;
}
.insticon {
float:left;
width: 25px;
height: 25px;
padding: 15px;
cursor: pointer;
fill: white;
font-size:.8em;
letter-spacing:0.05em;
}
li a {
display: inline;
}
@media only screen and (max-width : 555px) {
.find{
display: none;
}
}
content {
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>
<li class="instagram">
<a href="" class="navBarLinks find">Find me on</a>
<a href="" class="navBarLinks in">
<svg class="insticon" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-227 325 155.2 144" style="enable-background:new -227 325 155.2 144;" xml:space="preserve">
<path style="" d="M-184.3,447.7h-21.4V379h21.4C-184.3,379-184.3,447.7-184.3,447.7z M-195,369.6
c-6.8,0-12.4-5.6-12.4-12.4c0-6.8,5.5-12.4,12.4-12.4c6.8,0,12.4,5.5,12.4,12.4C-182.6,364-188.1,369.6-195,369.6z M-104.3,447.7
h-21.3v-33.4c0-8-0.1-18.2-11.1-18.2c-11.1,0-12.8,8.7-12.8,17.6v34h-21.4V379h20.5v9.4h0.3c2.8-5.4,9.8-11.1,20.2-11.1
c21.6,0,25.6,14.2,25.6,32.7C-104.3,410-104.3,447.7-104.3,447.7z"/>
<g>
<path style="" d="M-75.1,445c0.7-0.1,1-0.5,1-1.1c0-0.8-0.5-1.1-1.4-1.1H-77v4h0.6V445h0.7l0,0l1.1,1.7h0.6L-75.1,445
L-75.1,445z M-75.7,444.6h-0.7v-1.4h0.9c0.4,0,0.9,0.1,0.9,0.6C-74.6,444.5-75.1,444.6-75.7,444.6z"/>
<path style="" d="M-75.7,441c-2.1,0-3.8,1.7-3.8,3.8c0,2.1,1.7,3.8,3.8,3.8s3.8-1.7,3.8-3.8
C-71.8,442.6-73.5,441-75.7,441z M-75.7,448.1c-1.8,0-3.3-1.4-3.3-3.3c0-1.9,1.4-3.3,3.3-3.3c1.8,0,3.3,1.4,3.3,3.3
C-72.4,446.7-73.8,448.1-75.7,448.1z"/>
</g>
</svg>
</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>
答案 0 :(得分：2)
这可以通过多种方式完成。在这里，我使用了line-height属性。
给
.navBarLinks {
line-height: 42px;
}
和
.insticon{
padding: 5px 15px;
}
* {
margin: 0;
padding: 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 {
position: fixed;
height: 50px;
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: 50px;
transition: .3s height;
overflow: hidden;
list-style: none;
}
ul {
width:100%;
}
li {
padding-top: 15px;
display:inline-block;
*display:inline; /*IE7*/
*zoom:1; /*IE7*/
margin-right:50px;
}
.navBarLinks {
color: inherit;
cursor: pointer;
font-size: .8em;
letter-spacing: 0.05em;
transition: .3s color;
padding-top: 15px;
line-height: 42px;
}
.instagram{
float:left;
padding-left:50px;
}
.hamburger {
float:right;
padding-right:50px;
}
.insticon {
float:left;
width: 25px;
height: 25px;
padding: 15px;
cursor: pointer;
fill: white;
font-size:.8em;
letter-spacing:0.05em;
}
li a {
display: inline;
}
@media only screen and (max-width : 555px) {
.find{
display: none;
}
}
content {
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;
}
.insticon{
padding: 5px 15px;
}<header>
<div class="header-wrapper">
<div class="header-bg"></div>
<div class="header-content">
<ul>
<li class="instagram">
<a href="" class="navBarLinks find">Find me on</a>
<a href="" class="navBarLinks in">
<svg class="insticon" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-227 325 155.2 144" style="enable-background:new -227 325 155.2 144;" xml:space="preserve">
<path style="" d="M-184.3,447.7h-21.4V379h21.4C-184.3,379-184.3,447.7-184.3,447.7z M-195,369.6
c-6.8,0-12.4-5.6-12.4-12.4c0-6.8,5.5-12.4,12.4-12.4c6.8,0,12.4,5.5,12.4,12.4C-182.6,364-188.1,369.6-195,369.6z M-104.3,447.7
h-21.3v-33.4c0-8-0.1-18.2-11.1-18.2c-11.1,0-12.8,8.7-12.8,17.6v34h-21.4V379h20.5v9.4h0.3c2.8-5.4,9.8-11.1,20.2-11.1
c21.6,0,25.6,14.2,25.6,32.7C-104.3,410-104.3,447.7-104.3,447.7z"/>
<g>
<path style="" d="M-75.1,445c0.7-0.1,1-0.5,1-1.1c0-0.8-0.5-1.1-1.4-1.1H-77v4h0.6V445h0.7l0,0l1.1,1.7h0.6L-75.1,445
L-75.1,445z M-75.7,444.6h-0.7v-1.4h0.9c0.4,0,0.9,0.1,0.9,0.6C-74.6,444.5-75.1,444.6-75.7,444.6z"/>
<path style="" d="M-75.7,441c-2.1,0-3.8,1.7-3.8,3.8c0,2.1,1.7,3.8,3.8,3.8s3.8-1.7,3.8-3.8
C-71.8,442.6-73.5,441-75.7,441z M-75.7,448.1c-1.8,0-3.3-1.4-3.3-3.3c0-1.9,1.4-3.3,3.3-3.3c1.8,0,3.3,1.4,3.3,3.3
C-72.4,446.7-73.8,448.1-75.7,448.1z"/>
</g>
</svg>
</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>
答案 1 :(得分：1)
一种选择是在.navBarLinks.find上设置float: left，如下所示。
你需要调整其他一些东西才能让它格式化得很好。随意阅读花车上的this。
或者，如果您想避免使用浮点数，可以在元素上设置display: inline-block。
* {
margin: 0;
padding: 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 {
position: fixed;
height: 50px;
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: 50px;
transition: .3s height;
overflow: hidden;
list-style: none;
}
ul {
width:100%;
}
li {
padding-top: 15px;
display:inline-block;
*display:inline; /*IE7*/
*zoom:1; /*IE7*/
margin-right:50px;
}
.navBarLinks {
color: inherit;
cursor: pointer;
font-size: .8em;
letter-spacing: 0.05em;
transition: .3s color;
padding-top: 15px;
}
.instagram{
float:left;
padding-left:50px;
}
.hamburger {
float:right;
padding-right:50px;
}
.insticon {
float:left;
width: 25px;
height: 25px;
padding: 15px;
cursor: pointer;
fill: white;
font-size:.8em;
letter-spacing:0.05em;
}
li a {
display: inline;
}
@media only screen and (max-width : 555px) {
.find{
display: none;
}
}
content {
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;
}
.navBarLinks.find {
float: left;
}<header>
<div class="header-wrapper">
<div class="header-bg"></div>
<div class="header-content">
<ul>
<li class="instagram">
<a href="" class="navBarLinks find">Find me on</a>
<a href="" class="navBarLinks in">
<svg class="insticon" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-227 325 155.2 144" style="enable-background:new -227 325 155.2 144;" xml:space="preserve">
<path style="" d="M-184.3,447.7h-21.4V379h21.4C-184.3,379-184.3,447.7-184.3,447.7z M-195,369.6
c-6.8,0-12.4-5.6-12.4-12.4c0-6.8,5.5-12.4,12.4-12.4c6.8,0,12.4,5.5,12.4,12.4C-182.6,364-188.1,369.6-195,369.6z M-104.3,447.7
h-21.3v-33.4c0-8-0.1-18.2-11.1-18.2c-11.1,0-12.8,8.7-12.8,17.6v34h-21.4V379h20.5v9.4h0.3c2.8-5.4,9.8-11.1,20.2-11.1
c21.6,0,25.6,14.2,25.6,32.7C-104.3,410-104.3,447.7-104.3,447.7z"/>
<g>
<path style="" d="M-75.1,445c0.7-0.1,1-0.5,1-1.1c0-0.8-0.5-1.1-1.4-1.1H-77v4h0.6V445h0.7l0,0l1.1,1.7h0.6L-75.1,445
L-75.1,445z M-75.7,444.6h-0.7v-1.4h0.9c0.4,0,0.9,0.1,0.9,0.6C-74.6,444.5-75.1,444.6-75.7,444.6z"/>
<path style="" d="M-75.7,441c-2.1,0-3.8,1.7-3.8,3.8c0,2.1,1.7,3.8,3.8,3.8s3.8-1.7,3.8-3.8
C-71.8,442.6-73.5,441-75.7,441z M-75.7,448.1c-1.8,0-3.3-1.4-3.3-3.3c0-1.9,1.4-3.3,3.3-3.3c1.8,0,3.3,1.4,3.3,3.3
C-72.4,446.7-73.8,448.1-75.7,448.1z"/>
</g>
</svg>
</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>