Question

我想让一个导航栏显示在网页的顶部，在一个干净的盒子里面有水平按钮。与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>

Answer 1

如果你向“li”元素添加一个显示css选择器，它就会起作用

将以下内容添加到您的CSS中。

  li{
     display:inline-block;
   }

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

Answer 2

看起来你的导航正在使用boostrap类。如果是这样，请下载并添加boostrap.css。

HTML导航栏，固定在网页顶部，水平框（按钮）

2 个答案: