Question

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

由于某种原因，徽标不会随页面滚动，但是.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>

Answer 1

一些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>

Answer 2

在.nav类中尝试position: fixed;或position: absolute;，然后在.hero类中尝试position: absolute

Answer 3

尝试将商品与flex对齐：

.nav {
 margin: auto;
 height: 60px;
 width: 100%;
 max-width: 900px;
 background: #efefef;
 font-family: 'Assistant' , sans-serif;
 font-weight: 700;
 display: flex;
 justify-content: space-between;
}

#left {
 margin: 0;
 padding-top: 17px;
 padding-left: 20px;
 list-style: none;
 display: flex;
}

#left li {
 display: inline-block;
 padding-right: 15px;
 font-size: 12pt;
}

.afs {
 text-align: center;
 width: 100%;
 max-width: 900px;

}

.afs img {
 margin: 5px auto 0px auto;
 height: 50px;
}

#right {
 margin: 0;
 padding-top: 17px;
 padding-right: 20px;
 list-style: none; 
 display: flex;
}

#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;
}

Answer 4

使用flex，可以为divs菜单创建一些ul周围的内容，并指定每个div容器的宽度以内嵌显示菜单和徽标。至于英雄形象，在打开<body>之后移动它，您可以指定一个position of fixed和z-index of -1来将其移动到菜单后面。请参阅JSFiddle，其中显示了新的CSS以及您站点中的实际图像。

https://jsfiddle.net/4Lk1ygsp/

.nav {
  margin: auto;
  height: 60px;
  width: 100%;
  max-width: 900px;
  background: #efefef;
  font-family: 'Assistant', sans-serif;
  font-weight: 700;
}

#nav-left {
  position: relative;
  float: left;
  width: 300px;
  display: inline-flex;
}

#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;
}

#nav-right {
  position: relative;
  float: right;
  width: 300px;
  display: inline-flex;
}

#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(http://afsmma.com/images/ph.jpg) 50% 50% no-repeat;
  background-size: cover;
  position: fixed;
  width: 100%;
  z-index: -1;
}

#body-container {
  width: 900px;
  margin: 0px auto;
  color: #fff;
}

<!DOCTYPE html>
<html>

<body>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ambition Fight Series</title>
    <link href="css/styles.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Assistant:400,700&amp;display=swap" rel="stylesheet">
  </head>

  <body>
    <div class="hero"></div>

    <div class="nav">

      <div id="nav-left">
        <ul id="left">
          <li>HOME</li>
          <li>EVENTS</li>
          <li>TICKETS</li>
        </ul>
      </div>

      <div class="afs">
        <img src="http://afsmma.com/images/LogoCyan.svg">
      </div>

      <div id="nav-right">
        <ul id="right">
          <li>SHOP</li>
          <li>GALLERY</li>
          <li>CONTACT</li>
        </ul>
      </div>

    </div>

    <div id="body-container">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ullamcorper volutpat nunc vehicula tincidunt. Phasellus vel urna id mi aliquam consequat non eget eros. Fusce rutrum lorem nunc, eu ultricies justo tempor sit amet. Orci varius natoque penatibus
        et magnis dis parturient montes, nascetur ridiculus mus. Mauris ante velit, eleifend non nulla et, mollis blandit purus. Curabitur vehicula orci vel ultricies pretium. Donec cursus suscipit arcu, eget dignissim eros scelerisque at. Mauris a blandit
        libero. Quisque quis vehicula orci, id dapibus ipsum. Maecenas urna purus, mattis et sollicitudin eget, ullamcorper quis enim. Maecenas sagittis mi vitae justo feugiat pretium. In quis elementum sapien. Integer consequat mi vitae nisl vulputate
        feugiat. Curabitur rhoncus, lorem at fermentum sagittis, tellus metus sagittis metus, et ullamcorper massa mi sit amet metus. Mauris nec dictum orci, eu pellentesque mi. Proin maximus et lacus eget vestibulum.
      </p>
      <p>
        In tempor erat nec tristique cursus. Quisque eleifend placerat lacinia. Suspendisse lectus nibh, congue non auctor non, lacinia et erat. Donec pellentesque mi ac sapien luctus, luctus laoreet quam ullamcorper. Donec consequat est neque, id elementum libero
        iaculis sit amet. Fusce imperdiet in erat in imperdiet. Cras ullamcorper elit vel nisl efficitur ultricies. Suspendisse potenti. Quisque eu porta erat, a mattis turpis. Quisque aliquam nunc quis felis consectetur, ut interdum tortor sagittis.
        Suspendisse posuere ipsum ut ipsum sagittis viverra. Vestibulum feugiat, turpis ut vehicula dignissim, ipsum lectus efficitur magna, facilisis condimentum mi nulla sed mi. Nullam nunc dui, elementum et tellus nec, facilisis convallis libero. Mauris
        facilisis, magna ut vestibulum ornare, elit massa pellentesque arcu, sed laoreet nisi erat quis dolor.
      </p>
      <p>
        Donec ut imperdiet nisi. Nullam molestie convallis erat convallis accumsan. Suspendisse in lectus ac orci aliquet consequat. Praesent eleifend, nisl quis vulputate mollis, dui erat dignissim tortor, non mattis felis enim quis magna. Fusce posuere ante
        ac orci rutrum, ut varius lectus gravida. Curabitur tristique volutpat sodales. Fusce lobortis volutpat pretium. Integer luctus purus eu neque blandit, id rhoncus diam consectetur. Donec placerat sapien vel augue semper, consequat consequat eros
        dictum. Fusce sagittis, nibh at scelerisque finibus, lorem purus aliquam dolor, at finibus quam dui ut dolor.
      </p>
      <p>
        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur vehicula iaculis volutpat. Nullam nibh mi, dapibus a nisl facilisis, consectetur gravida elit. Donec tempus tristique massa semper elementum. Nam mauris
        massa, aliquam in dolor ut, porttitor cursus erat. Cras pretium egestas ipsum quis ornare. Nunc sit amet ornare odio.
      </p>
      <p>
        Mauris molestie enim vitae magna venenatis fringilla. Nullam nisi dui, eleifend et erat a, sollicitudin fringilla risus. Integer molestie purus id urna tristique volutpat. Duis interdum pharetra arcu vitae consectetur. Nunc at suscipit quam. Nunc sit
        amet gravida risus, malesuada eleifend libero. Aenean quis nibh libero. Morbi ut sapien nec erat sodales tempor at in magna. Etiam pretium velit mi, quis auctor sapien fringilla sit amet. Maecenas ornare, sapien et posuere tempor, nunc justo tempus
        odio, ac sodales ipsum lacus quis nisi. Suspendisse viverra turpis at nibh blandit, id sollicitudin purus fermentum.
      </p>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ullamcorper volutpat nunc vehicula tincidunt. Phasellus vel urna id mi aliquam consequat non eget eros. Fusce rutrum lorem nunc, eu ultricies justo tempor sit amet. Orci varius natoque penatibus
        et magnis dis parturient montes, nascetur ridiculus mus. Mauris ante velit, eleifend non nulla et, mollis blandit purus. Curabitur vehicula orci vel ultricies pretium. Donec cursus suscipit arcu, eget dignissim eros scelerisque at. Mauris a blandit
        libero. Quisque quis vehicula orci, id dapibus ipsum. Maecenas urna purus, mattis et sollicitudin eget, ullamcorper quis enim. Maecenas sagittis mi vitae justo feugiat pretium. In quis elementum sapien. Integer consequat mi vitae nisl vulputate
        feugiat. Curabitur rhoncus, lorem at fermentum sagittis, tellus metus sagittis metus, et ullamcorper massa mi sit amet metus. Mauris nec dictum orci, eu pellentesque mi. Proin maximus et lacus eget vestibulum.
      </p>
      <p>
        In tempor erat nec tristique cursus. Quisque eleifend placerat lacinia. Suspendisse lectus nibh, congue non auctor non, lacinia et erat. Donec pellentesque mi ac sapien luctus, luctus laoreet quam ullamcorper. Donec consequat est neque, id elementum libero
        iaculis sit amet. Fusce imperdiet in erat in imperdiet. Cras ullamcorper elit vel nisl efficitur ultricies. Suspendisse potenti. Quisque eu porta erat, a mattis turpis. Quisque aliquam nunc quis felis consectetur, ut interdum tortor sagittis.
        Suspendisse posuere ipsum ut ipsum sagittis viverra. Vestibulum feugiat, turpis ut vehicula dignissim, ipsum lectus efficitur magna, facilisis condimentum mi nulla sed mi. Nullam nunc dui, elementum et tellus nec, facilisis convallis libero. Mauris
        facilisis, magna ut vestibulum ornare, elit massa pellentesque arcu, sed laoreet nisi erat quis dolor.
      </p>
      <p>
        Donec ut imperdiet nisi. Nullam molestie convallis erat convallis accumsan. Suspendisse in lectus ac orci aliquet consequat. Praesent eleifend, nisl quis vulputate mollis, dui erat dignissim tortor, non mattis felis enim quis magna. Fusce posuere ante
        ac orci rutrum, ut varius lectus gravida. Curabitur tristique volutpat sodales. Fusce lobortis volutpat pretium. Integer luctus purus eu neque blandit, id rhoncus diam consectetur. Donec placerat sapien vel augue semper, consequat consequat eros
        dictum. Fusce sagittis, nibh at scelerisque finibus, lorem purus aliquam dolor, at finibus quam dui ut dolor.
      </p>
      <p>
        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur vehicula iaculis volutpat. Nullam nibh mi, dapibus a nisl facilisis, consectetur gravida elit. Donec tempus tristique massa semper elementum. Nam mauris
        massa, aliquam in dolor ut, porttitor cursus erat. Cras pretium egestas ipsum quis ornare. Nunc sit amet ornare odio.
      </p>
      <p>
        Mauris molestie enim vitae magna venenatis fringilla. Nullam nisi dui, eleifend et erat a, sollicitudin fringilla risus. Integer molestie purus id urna tristique volutpat. Duis interdum pharetra arcu vitae consectetur. Nunc at suscipit quam. Nunc sit
        amet gravida risus, malesuada eleifend libero. Aenean quis nibh libero. Morbi ut sapien nec erat sodales tempor at in magna. Etiam pretium velit mi, quis auctor sapien fringilla sit amet. Maecenas ornare, sapien et posuere tempor, nunc justo tempus
        odio, ac sodales ipsum lacus quis nisi. Suspendisse viverra turpis at nibh blandit, id sollicitudin purus fermentum.
      </p>
    </div>
  </body>

</html>

如何在导航栏中的两个<ul>之间放置一个<img>？

4 个答案: