水平导航栏的问题

Question

我正在使用带有下拉菜单的水平导航栏。 我对编写代码很陌生，所以这可能是一个愚蠢的问题。 我的导航贴在我网站的左侧，但我需要它与文本保持一致，我无法让导航栏抛出我的整个网页我该如何解决这个问题？

我的网站的照片有 2 个问题：

在此处输入图像描述

 nav { position: absolute; }.horizontal { list-style-type: none; margin: 40 auto; width: 640px; padding: 0; overflow: hidden; }.horizontal>li { float: left; }.horizontal li ul { display: none; margin: 0; padding: 0; list-style: none; position: relative; width: 100%; }.horizontal li:hover ul { display: inline-block; }.horizontal li a { display: block; text-decoration: none; text-align: center; padding: 22px 10px; font-family: arial; font-size: 8pt; font-weight: bold; color: #FFFFFF; text-transform: uppercase; border-right: 1px solid #607987; background-color: #006600; letter-spacing: .08em; width: 70px; }.horizontal li a:hover { background-color: darkorange; color: #a2becf }.horizontal li:first-child a { border-left: 0; }.horizontal li:last-child a { border-right: 0; } h1 { margin-top: 80px; }

 <nav id="mainnav"> <ul class="horizontal"> <li><a href="#">Home</a></li> <li><a href="planning/planning.html" title="">Planning</a></li> <li><a href="takken/takken.html" title="">Takken</a> <ul> <li><a href="takken/kapoenen/kapoenen.html">Kapoenen</a></li> <li><a href="takken/kawellen/kawellen.html">Kawellen</a></li> <li><a href="takken/kajo's/kajo.html">Kajoo's</a></li> <li><a href="takken/jojoo's/jojoo.html">Jojoo's</a></li> <li><a href="takken/Givers/givers.html">Givers</a></li> <li><a href="takken/Jin/jin.html">Jin</a></li> <li><a href="takken/Akabe/akabe.html">Akabe</a></li> </ul> </li> <li><a href="kleding/kleding.html" title="">Kleding</a></li> <li><a href="contact/contact.html" title="">Contact</a> <ul> <li><a href="contact/leiding/leiding.html">Leiding</a></li> <li><a href="contact/verhuur/verhuur.html">Verhuur</a></li> </ul> </li> <li><a href="inschrijven/inschrijven.html" title="">Inschrijven</a></li> </ul> </nav>

Answer 1

css 中的两件事给您带来了麻烦。

nav{ position: absolute; } nav{ position: absolute; }表示这个 div 不会填充宽度。

horizontal{ margin: 40 auto;} 40无效。 你必须在 CSS 中指定一个测量单位，所以如果我猜你的意图应该是 40px，但其他单位是可用的。

这里修改了css 你可以试试。

 nav { width: 100%; background-color: #006600; }.horizontal { list-style-type: none; margin: 40px auto; width: 640px; padding: 0; overflow: hidden; }

Answer 2

步骤 1)添加 HTML：

例子

<!-- The navigation menu -->
<div class="navbar">
  <a class="active" href="#">Home</a>
  <a href="#">Planning</a>
  <a href="#">Takken</a>
  <a href="#">Kleding</a>
  <a href="#">Contact</a>
  <a href="#">Inschrijven</a>
</div>

和 CSS：

.navbar {
  width: 100%;
  background-color: #555;
  overflow: auto;
}

.navbar a {
  float: left;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 17px;
  width: 15%;; /* Four links of equal widths */
  text-align: center;
}