ブラウザで完全に展開されているときにナビゲーションバーが水平に表示されない

Question

私のナビバーにhorizontallyを表示させようとしています。私のウェブページの一番上の行に私のh1タグを表示しています。私はそれを水平に整列させるためにさまざまな方法を試しましたが、変化しません。私のナビゲーションバーには、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>