温馨提示:本文翻译自stackoverflow.com,查看原文请点击:html - How do I position a in-between two in a navigation bar?

html - 如何在导航栏中放置两个之间的中间位置?

发布于 2020-03-27 11:09:59

我正在尝试在页面顶部创建一个导航栏,徽标位于中间,列表两侧。每个列表包含三个指向网站页面的链接。

由于某种原因,徽标不会随页面滚动,但是.nav,#left和#right可以正常滚动。

该页面位于此处:

afsmma.com

这是代码:

.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>

查看更多

查看更多

提问者
Jack Scott
被浏览
57
Vikas Saini 2019-07-03 22:44

一点Flex可以轻松,非常干净地解决它。

避免位置:绝对并使用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>

发布
问题

分享
好友

手机
浏览

扫码手机浏览