我需要创建一个网站标题,如下所示:


图片上方的徽标和菜单;
无论图像是什么,徽标和菜单都是相同的。
图片上将有标题和文字。
每个图像的标题和文本将有所不同。
徽标应在左侧,菜单应在右侧;
徽标+菜单最多只能占据600px的宽度(包装纸)。
那个包装器应该放在站点的中心。


所以我有以下online example



header {
  text-align: center;
}

div.wrapper {
  margin: 0 auto;
  max-width: 600px;
  text-align: left;
}

ul.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.menu li {
  display: inline-block;
  margin: 0;
  padding: 0;
}

em {
  border: 1px solid red;
  position: absolute;
  z-index: 2000;
}

nav {
  position: absolute;
  z-index: 2000;
  right: 0;
}

.slides {
  position: absolute;
  width: 100%;
}

.slide img {
  position: relative;
  width: 100%;
}

.slide .text {
  position: absolute;
  text-align: center;
  top: 80px;
  width: 100%;
}

<header>

  <div class="wrapper">

    <em class="brand">
          <img src="http://via.placeholder.com/200x40"/>
        </em>

    <nav class="menu">
      <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

  </div>

  <div class="slides">

    <div class="slide">
      <img src="http://via.placeholder.com/400x200?text=100 percent width" />
      <div class="text">
        <h2>Slide 1</h2>
        <p>Text of slide 1</p>
      </div>
    </div>

    <div class="slide" style="display:none;">
      <img src="http://via.placeholder.com/400x200?text=100 percent width" />
      <div class="text">
        <h2>Slide 2</h2>
        <p>Text of slide 2</p>
      </div>
    </div>

  </div>

</header>

<main>
  Main content
</main>





我目前遇到的问题是徽标+菜单未居中,最大宽度为600px。但老实说,我不确定我使用的定位方法是否正确。

最佳答案

问题是nav作为positionabsolute,要在logo and menuslide中心对齐两个max-width:600,需要将position:relative添加到作为.wrapper父元素的nav中。 。


  位置-绝对从常规文档流中删除该元素;没有
  在页面布局中为元素创建了空间。相反,它是
  相对于其最接近的祖先的位置;
  否则,它相对于初始包含块放置。


div.wrapper {
  margin: 0 auto;
  max-width: 600px;
  text-align: left;
  position:relative;/*Add this*/
}


因此,它的relative.wrapper并在幻灯片中心对齐。



header {
  text-align: center;
}

div.wrapper {
  margin: 0 auto;
  max-width: 600px;
  text-align: left;
  position: relative;
}

ul.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.menu li {
  display: inline-block;
  margin: 0;
  padding: 0;
}

em {
  border: 1px solid red;
  position: absolute;
  z-index: 2000;
}

nav {
  position: absolute;
  z-index: 2000;
  right: 0;
}

.slides {
  position: absolute;
  width: 100%;
}

.slide img {
  position: relative;
  width: 100%;
}

.slide .text {
  position: absolute;
  text-align: center;
  top: 80px;
  width: 100%;
}

<header>
  <div class="wrapper">

    <em class="brand">
          <img src="http://via.placeholder.com/200x40"/>
        </em>

    <nav class="menu">
      <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

  </div>

  <div class="slides">

    <div class="slide">
      <img src="http://via.placeholder.com/400x200?text=100 percent width" />
      <div class="text">
        <h2>Slide 1</h2>
        <p>Text of slide 1</p>
      </div>
    </div>

    <div class="slide" style="display:none;">
      <img src="http://via.placeholder.com/400x200?text=100 percent width" />
      <div class="text">
        <h2>Slide 2</h2>
        <p>Text of slide 2</p>
      </div>
    </div>

  </div>

</header>

关于html - 将徽标,菜单和标语放在图片幻灯片上,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45918573/

10-10 05:37
查看更多