定位导航栏

Question

定位导航栏

htmlcssheadernavigation

6

屏幕截图：当前主页

屏幕截图：期望主页/导航

屏幕截图：页脚

我想在页眉中的两个图片之下放置一个下拉导航栏。

目前，导航栏向左浮动，因为我们迄今为止在课堂上是这样教的，但页眉中的两个图片（'Logo'和'Online Portfolio Banner'）也是向左浮动的。我想知道是否有一种方法可以实现我期望的主页外观，即将导航栏放置在横幅下方？

代码片段：

nav ul {
    display: inline-block;
    list-style-type: none;
    text-align: center;
    float: left;
}
nav ul li {
    float: left;
    position: relative;
}
nav ul li a {
    display: block;
    min-width: 150px;
    padding: 7px 4px;
    margin-right: 5px;
    background-color: #393939;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
}
nav ul li a:hover {
    color: #2cc1d9;
}
nav ul ul {
    list-style-type: none;
    position: absolute;
    left: -9999px;
}
nav ul ul li {
    float: none;
}
nav ul ul li a {
    background-color: rgba(108,210,221,1.00);
    min-width: 200px;
    color: #fff;
    border: 1px solid #fff;
    display: block;
    padding: 7px 2px;
    text-decoration: none;
    font-size: .8em;
}
nav ul ul li a:hover {
    color: #393939;
}
nav ul li:hover ul {
    left: 0px;
}
img {
    margin-top: 5px;
    padding: 10px;
    float: left;
}
.banner {
    width: 585px;
    height: 77px;
    float: left;
}

<header>
  <p><img src="images/logo.png" width="130" height="130" alt="image of brand logo"></p>
  <p>
  <div class="banner"><img src="images/OP_header.png" width="585" height="77" alt="online portfolio banner"></div>
  </p>
  <nav>
    <ul>
      <li><a href="index.html">Home</a> </li>
    </ul>
    <ul>
      <li><a href="about.html">About</a>
        <ul>
          <li><a href="about.html">About Me</a></li>
          <li><a href="resume.html">My Resume</a></li>
        </ul>
      </li>
      <li><a href="index.html">Work</a>
        <ul>
          <li><a href="branding.html">Identity & Branding</a></li>
          <li><a href="typography.html">Typography</a></li>
          <li><a href="marketing.html">Marketing</a></li>
        </ul>
      </li>
      <li><a href="contact.html">Contact</a>
        <ul>
          <li><a href="contact.html">Contact Me</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</header>

有人有任何建议或解决方法吗？非常感激！

- Lauren Marie

请使用简单的HTML5或任何框架。 - Jishnu V S

@Launren，你使用了float:left，这会使导航栏与横幅并排，如果你需要从下一个元素开始，使用clear:both。 - Amit kumar

2个回答

1

您的结构有误，请尝试以下更正方式（使用全屏预览）：

nav {
  display: inline-block;
  padding: 12px;
}

nav ul {
 list-style-type: none;
 text-align: center;
  padding: 0;
  margin: 0;
  display: inline-flex;
}

nav ul li {
  position: relative;
}

nav ul li ul {
  display: flex;
  flex-direction: column;
  position: absolute;
}

nav ul li a {
 display: block;
 min-width: 150px;
 padding: 7px 4px;
 margin-right: 5px;
 background-color: #393939;
 color: #fff;
 text-decoration: none;
 text-transform: uppercase;
}
nav ul li a:hover {
 color: #2cc1d9;
}
nav ul ul {
 list-style-type: none;
 position: absolute;
 left: -9999px;
}
nav ul ul li {
 float: none;
}
nav ul ul li a {
 background-color: rgba(108,210,221,1.00);
 min-width: 200px;
 color: #fff;
 border: 1px solid #fff;
 display: block;
 padding: 7px 2px;
 text-decoration: none;
 font-size: .8em;
}
nav ul ul li a:hover {
 color: #393939;
}
nav ul li:hover ul {
 left: 0px;
}
.brand-logo {
 padding: 10px;
 float: left;
}
.banner {
  padding: 10px;
 width: 585px;
 height: 77px;
 float: left;
}

<header>
  <div class="brand-logo">
    <img src="http://placehold.it/130x130" width="130" height="130" alt="image of brand logo">
  </div>
  <div class="banner">
    <img src="http://placehold.it/585x77" width="585" height="77" alt="online portfolio banner">
  </div>
  <nav>
    <ul>
      <li><a href="index.html">Home</a> </li>
    </ul>
    <ul>
      <li><a href="about.html">About</a>
        <ul>
          <li><a href="about.html">About Me</a></li>
          <li><a href="resume.html">My Resume</a></li>
        </ul>
      </li>
      <li><a href="index.html">Work</a>
        <ul>
          <li><a href="branding.html">Identity &amp; Branding</a></li>
          <li><a href="typography.html">Typography</a></li>
          <li><a href="marketing.html">Marketing</a></li>
        </ul>
      </li>
      <li><a href="contact.html">Contact</a>
        <ul>
          <li><a href="contact.html">Contact Me</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</header>

希望这有所帮助！

- Saurav Rastogi

很高兴为您服务，@LaurenMarie。 - Saurav Rastogi

我还有一个问题，不确定您是否可以帮忙解决。我的页脚无法保持在网页底部...它会出现，但似乎浮在我的包装器div之上，在它和浏览器窗口底部之间留下很多空间。在css中，我将页脚定位为绝对位置，同时将宽度设置为100%。在html中，我将页脚标签放在封闭包装器div之后...这些中的任何一个引起了这个问题吗？另外，我不确定能否在评论中放置代码... - Lauren Marie

我已经添加了另一个截图，这样你就可以看到我在描述什么。请查看：页脚截图。 - Lauren Marie

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Amit kumar · Accepted Answer

nav{
clear:both
}

nav ul {
 display: inline-block;
 list-style-type: none;
 text-align: center;
 float: left;
}
nav ul li {
 float: left;
 position: relative;
}
nav ul li a {
 display: block;
 min-width: 150px;
 padding: 7px 4px;
 margin-right: 5px;
 background-color: #393939;
 color: #fff;
 text-decoration: none;
 text-transform: uppercase;
}
nav ul li a:hover {
 color: #2cc1d9;
}
nav ul ul {
 list-style-type: none;
 position: absolute;
 left: -9999px;
}
nav ul ul li {
 float: none;
}
nav ul ul li a {
 background-color: rgba(108,210,221,1.00);
 min-width: 200px;
 color: #fff;
 border: 1px solid #fff;
 display: block;
 padding: 7px 2px;
 text-decoration: none;
 font-size: .8em;
}
nav ul ul li a:hover {
 color: #393939;
}
nav ul li:hover ul {
 left: 0px;
}
img {
 margin-top: 5px;
 padding: 10px;
 float: left;
}
.banner {
 width: 585px;
 height: 77px;
 float: left;
}

<header>
  <p><img src="images/logo.png" width="130" height="130" alt="image of brand logo"></p>
  <p>
  <div class="banner"><img src="images/OP_header.png" width="585" height="77" alt="online portfolio banner"></div>
  </p>
  <nav>
    <ul>
      <li><a href="index.html">Home</a> </li>
    </ul>
    <ul>
      <li><a href="about.html">About</a>
        <ul>
          <li><a href="about.html">About Me</a></li>
          <li><a href="resume.html">My Resume</a></li>
        </ul>
      </li>
      <li><a href="index.html">Work</a>
        <ul>
          <li><a href="branding.html">Identity & Branding</a></li>
          <li><a href="typography.html">Typography</a></li>
          <li><a href="marketing.html">Marketing</a></li>
        </ul>
      </li>
      <li><a href="contact.html">Contact</a>
        <ul>
          <li><a href="contact.html">Contact Me</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</header>