HTML 导航条,固定在网页顶部,水平框(按钮)

HTML Navigation Bar, fixed at the top of webpage, horizontal boxes(buttons)

我正在尝试让导航栏显示在网页顶部,在干净的框内放置水平按钮。与 http://www.apple.com/ 中的导航栏非常相似。我觉得好像我应该知道该怎么做,但显然我不知道。非常感谢任何帮助,甚至是要点和提示。谢谢,下面是我到目前为止的代码。 Css 先显示,然后是我的 HTML。

body{
  border: solid;
  background-color: white;
  color: black;
  text-align: center;
}

table.slideshow{


}
th.slideshowtitle{
  text-align: center;

}

footer{
  border-top: solid 10px;


}

/*nav bar*/
.navbar-inverse {
  background-color:black;
}
<!DOCTYPE html>

<html>

<head>
  <link href="C:\Users\Chester Szydlowski\Desktop\HOF\stylesheet.css" type="text/css" rel= "stylesheet" />
<title>
  Hall Of Framers
</title>
</head>
<body>

<nav class ="navbar navbar-inverse navbar-fixed-top">
       <div class="container">
         <div class="navbar-header">
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
           </button>
         </div>
      <div id="navbar" class="collapse navbar-collapse">
          <u1 class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="C:\Users\Chester Szydlowski\Desktop\HOF\public_html\EmailList.html">Email List</a></li>
            <li><a href="">Custom Frames</a></li>
            <li><a href="">News</a></li>
            <li><a href="">Silent Auction</a></li>
            <li><a href="">Upcoming and Past Events</a><li>
           <li><a href="">i dont know</a></li>
        </u1>
    </div>
  </div>
</nav>


<p> Products </p>

</table>
</body>

如果您将显示 css 选择器添加到 "li" 元素,它会起到作用

将以下内容添加到您的 css。

  li{
     display:inline-block;
   }

这会将元素移动到彼此旁边,您可以从那里进一步设置样式。祝你好运

看起来你的人正在使用 bootstrap 类。如果是这样,只需下载并包含 boostrap.css.