我正在尝试在页面顶部创建一个导航栏,中间是 Logo ,两侧是列表。每个列表包含三个指向网站页面的链接。
出于某种原因, Logo 不会随页面滚动,但 .nav、#left 和 #right 会正常滚动。
页面在这里:
代码如下:
.nav {
margin: auto;
height: 60px;
width: 100%;
max-width: 900px;
background: #efefef;
font-family: 'Assistant' , sans-serif;
font-weight: 700;
}
#left {
margin: 0;
padding-top: 17px;
padding-left: 20px;
float: left;
list-style: none;
}
#left li {
display: inline-block;
padding-right: 15px;
font-size: 12pt;
}
.afs {
position: absolute;
text-align: center;
width: 100%;
max-width: 900px;
}
.afs img {
margin: 5px auto 0px auto;
height: 50px;
}
#right {
float: right;
margin: 0;
padding-top: 17px;
padding-right: 20px;
list-style: none;
}
#right li {
display: inline-block;
padding-left: 15px;
font-size: 12pt;
}
.hero {
height: 100%;
background: url(/images/ph.jpg) 50% 50% no-repeat;
background-size: cover;
}
<div class="nav">
<ul id="left">
<li>HOME</li>
<li>EVENTS</li>
<li>TICKETS</li>
</ul>
<div class="afs">
<img src="images/LogoCyan.svg">
</div>
<ul id="right">
<li>SHOP</li>
<li>GALLERY</li>
<li>CONTACT</li>
</ul>
</div>
<div class="hero"></div>
最佳答案
一点点 Flex 就能轻松干净地解决这个问题。
避免 position:absolute 而使用 flex,
演示:https://jsfiddle.net/vikas_saini/v6uxh3sc/1/
CSS:
.nav {
margin: auto;
height: 60px;
width: 100%;
max-width: 900px;
background: #efefef;
display:flex;
justify-content: space-between;
font-family: 'Assistant' , sans-serif;
font-weight: 700;
}
#left {
margin: 0;
display:flex;
padding-top: 17px;
padding-left: 20px;
float: left;
list-style: none;
}
#left li {
display: inline-block;
padding-right: 15px;
font-size: 12pt;
}
.afs {
flex-grow: 1;
text-align: center;
width: 100%;
max-width: 900px;
}
.afs img {
margin: 5px auto 0px auto;
height: 50px;
}
#right {
display:flex;
float: right;
margin: 0;
padding-top: 17px;
padding-right: 20px;
list-style: none;
}
#right li {
display: inline-block;
padding-left: 15px;
font-size: 12pt;
}
.hero {
height: 200vh;
background: url(/images/ph.jpg) 50% 50% no-repeat;
background-size: cover;
}
HTML:
<div class="nav">
<ul id="left">
<li>HOME</li>
<li>EVENTS</li>
<li>TICKETS</li>
</ul>
<div class="afs">
<div class="image-container">
<img src="images/LogoCyan.svg">
</div>
</div>
<ul id="right">
<li>SHOP</li>
<li>GALLERY</li>
<li>CONTACT</li>
</ul>
</div>
<div class="hero"></div>
关于html - 如何在导航栏中将 <img> 放置在两个 <ul> 之间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56872306/