在浏览器中完全展开时，导航栏不会水平显示

Question

我正在尝试让我的导航栏在网页顶部h1标签下方的一行中显示horizontally。我尝试了各种不同的方法来让它水平排列，但它不会改变。我的导航栏继续居中显示vertically。我希望它是h1下方顶部的细条。截至目前，它显示时每个li堆叠在另一个之上，而不是并排放置。任何帮助或想法不胜感激。

#wrapper{   
background-color: #FFFFFF;
color: #000066;
min-width: 700px; 
max-width: 1024px;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
}
h1 {
background-color: darkcyan;
color: #74ebd5;
background-position: center;
background-repeat: no-repeat;
text-align: center;
font-size: 3em;
line-height: 80%;
padding: 30px;
text-shadow: #CCCCCC;
margin-bottom: 0;
}
main {
margin-left: 180px;
padding-bottom: 100px;
}
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: #333;
width: 100%;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
nav{    display:inline-block;
width: 100%;
font-weight: bold;
background-color: grey;
}
nav ul {
list-style: none;
width: 100%;
border: 1px solid ;
text-align: right;
display:inline-block;
}
nav a{
text-decoration: none;
border: 1px solid;
width: 100%
} 
nav a:link{color:cyan;}
nav a:visited{color:#6699FF;}
nav a:hover{color: gold;}

<div id="wrapper">
<header>
<h1>Polar Bar</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li> 
<li><a href="menu.html">Menu</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="social.html">Social</a></li>
</ul>
</nav>

Answer 1

将li元素inline-block，并添加box-sizing:border-box：

CSS: #wrapper {
background-color: #FFFFFF;
color: #000066;
width: 700px;
max-width: 1024px;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
}
h1 {
background-color: darkcyan;
color: #74ebd5;
background-position: center;
background-repeat: no-repeat;
text-align: center;
font-size: 3em;
line-height: 80%;
padding: 30px;
text-shadow: #CCCCCC;
margin-bottom: 0;
}
main {
margin-left: 180px;
padding-bottom: 100px;
}
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: #333;
width: 100%;
box-sizing: border-box;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
box-sizing: border-box;
}
nav {
display: inline-block;
width: 100%;
font-weight: bold;
background-color: grey;
}
nav ul {
list-style: none;
width: 100%;
border: 1px solid;
text-align: right;
display: inline-block;
}
nav a {
text-decoration: none;
border: 1px solid;
width: 100%;
}
nav a:link {
color: cyan;
}
nav a:visited {
color: #6699FF;
}
nav a:hover {
color: gold;
}

<div id="wrapper">
<header>
<h1>Polar Bar</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="social.html">Social</a></li>
</ul>
</nav>

Answer 2

我不明白你的问题。 你想要什么？。但这是你想要的吗？

#wrapper{   background-color: #FFFFFF;
color: #000066;
min-width: 700px; 
max-width: 1024px;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
}
h1 {background-color: darkcyan;
color: #74ebd5;
background-position: center;
background-repeat: no-repeat;
text-align: center;
font-size: 3em;
line-height: 80%;
padding: 30px;
text-shadow: #CCCCCC;
margin-bottom: 0;}
main {margin-left: 180px;
padding-bottom: 100px;
}
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: #333;
width: 98% !important;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
nav{    display:inline-block;
width: 100%;
font-weight: bold;
background-color: grey;
}
nav ul {
list-style: none;
width: 100%;
border: 1px solid;
text-align: right;
display: inline-block;
}
nav > ul > li {
float: left;
display: inline-block;
}
nav a{text-decoration: none;
border: 1px solid;
} 

nav a:link{color:cyan;
}
nav a:visited{color:#6699FF;}
nav a:hover{color: gold;}

<div id="wrapper">
<header>
<h1>Polar Bar</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li> 
<li><a href="menu.html">Menu</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="social.html">Social</a></li>
</ul>
</nav>
</header>
</div>