简单的导航栏（初级）答案

【问题标题】：Simple navigation bar (Beginner)简单的导航栏（初级）
【发布时间】：2015-11-26 17:26:12
【问题描述】：

我刚刚学习 html，我的软件开发课上的老师告诉我应该开始在自己的时间尝试编程，所以我决定我应该尝试制作一个简单的网站。如您所见，我还没有走多远，一直在研究如何制作导航栏。我希望导航栏上的每个框都是可点击的并且能够链接到正确的网页。我确实尝试在每个 li 之前放置 a 标签并且没有图像映射，只要框能够链接到适当的网页，这就是我想要的，但是每个框之间有一个空格，我没有想要，这也导致第 6 个盒子被推到第 1 个盒子下面。使用图像映射，没有链接，当我检查元素时，它说图像映射是 0 x 0。让我知道我在导航栏上做错了什么，或者是否有更好的方法来做到这一点。 HTML：

body {
  background-color: #FFFFFF;
  margin: 0;
}
#name {
  font-size: 19pt;
  margin-top: 0;
  padding-top: 0;
  width: 100%;
  background-image: url(wood.png);
  height: 81px;
  display: block;
}
h2.Title {
  position: absolute;
  margin-bottom: 0;
  padding-bottom: 0;
  left: 535;
  top: 1;
}
h2.TitleShadow {
  position: absolute;
  left: 533;
  top: 0;
  color: #368BC1;
}
#navbar {
  display: table;
  height: 30px;
  width: 100%;
  padding-left: 0;
  position: absolute;
  left: 0;
  top: 65;
}
#navbar li {
  display: table-cell;
  height: 30px;
  width: 16.666666667%;
  line-height: 30px;
  text-align: center;
  border: 1px solid black;
  white-space: nowrap;
  background-color: #F8F8F8;
}

<html>

<head>
  <title>Noah's Sports Cards</title>
  <link href="home.css" rel="stylesheet" type="text/css" media="screen, tv, tty" />
</head>

<body>
  <div id="name">
    <h2 class="Title">Noah's Sports Cards</h2>
    <h2 class="TitleShadow">Noah's Sports Cards</h2>
  </div>
  <ul id="navbar" usemap="#navMap">
    <li>Home</li>
    <li>Albums</li>
    <li>Random</li>
    <li>Memorbilia</li>
    <li>Tools</li>
    <li>About</li>
  </ul>
  <div>
    <map id="navMap">
      <area shape="rect" coords="0, 82, 227.667, 113" href="home.htm" />
      <area shape="rect" coords="227.667, 82, 455.334, 113" href="albums.htm" />
      <area shape="rect" coords="455.334, 82, 683.001, 113" href="random.htm" />
      <area shape="rect" coords="683.001, 82, 910.668, 113" href="memorbilia.htm" />
      <area shape="rect" coords="910.668, 82, 1138.335, 113" href="tools.htm" />
      <area shape="rect" coords="1138.335, 82, 1366, 113" href="about.htm" />
    </map>
  </div>
</body>

</html>

【问题讨论】：

你能不能做一个fiddle的例子
为什么不创建一个ul 并使用display:table

标签： html css navigation navbar nav

【解决方案1】：

不要使用地图，之后您的页面语义将丢失。带有链接的同一段代码（只是<ul> 部分）：

<ul id="navbar">
  <li>
    <a href="home.htm">Home</a>
  </li>
  <li>
    <a href="albums.htm">Albums</a>
  </li>
  <li>
    <a href="random.htm">Random</a>
  </li>
  <li>
    <a href="memorbilia.htm">Memorbilia</a>
  </li>
  <li>
    <a href="tools.htm">Tools</a>
  </li>
  <li>
    <a href="about.htm">About</a>
  </li>
</ul>

然后在 CSS 中，只需添加这一行即可为链接添加全宽并将其解析为一个块，除了删除蓝色和下划线：

#navbar li a { color: #000; text-decoration: none; width: 100%; display: inline-block;}

【讨论】：

【解决方案2】：

首先，我建议您以正确的缩进开始编写代码。对于您自己和其他阅读您的代码的人来说，阅读这样的代码要困难得多。

要在导航栏中创建链接，只需执行以下操作：

 <nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="album.html">Album</a></li>
    <li><a href="random.html">Random</a></li>
    <li><a href="memorbilia.html">Memorbilia</a></li>
    <li><a href="tools.html">Tools</a></li>
    <li><a href="about.html">About</a></li>
  </ul>
</nav>

如果您在元素之间的空间和元素位置方面遇到问题，那只是 CSS 的问题。

将您的代码复制到https://jsfiddle.net/ 会生成一个集群页面，因此很难说出您的问题所在。

如果您需要更好的帮助，我建议您编辑帖子并提供更好的信息并删除不必要的内容。

【讨论】：

【解决方案3】：

导航栏

        <div class="collapse navbar-collapse" id="#navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="navbar-item active">
                    <a class="nav-link" href="#/">Home<span class="sr-only">(current)</span></a>
                </li>
                <li class="navbar-item">
                <a href="#">Link</a>
                </li>
                <li class="navbar-item dropdown">
                    <a class="nav-link dropdown-toggler" href="#" id="navbarDropdown" role="button" data-toggler="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown
                    </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">About</a>
                            <a class="dropdown-item" href="#">Another Action</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">One More</a>
                        </div>
                </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#">Disabled</a>
                    </li>
                </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>    
    </nav>

【讨论】：

欢迎来到 Stack Overflow！如果您编辑答案以添加解释以配合您的代码 sn-p，这将很有帮助。