背景色を全幅に保ちながらナビバーの項目を中心にする

Question

私はCSSを初めて使い、ページ用のナビゲーションバーで作業しますが、バーを全幅に保ったまま。私は何か見落としてますか？

ul { 
 
\t \t \t \t list-style-type: none; 
 
\t \t \t \t text-transform: uppercase; 
 
\t \t \t \t text-align: center; 
 
\t \t \t \t background-color: #333; 
 
\t \t \t \t overflow: hidden; 
 
\t \t \t \t width: 100%; 
 
\t \t \t \t z-index: 1; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t .naviMenu ul li { 
 
\t \t \t \t letter-spacing: 0.05em; 
 
\t \t \t \t color: white; 
 
\t \t \t \t float: left; 
 
\t \t \t \t padding: 14px 16px; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t .naviMenu ul li a { 
 
\t \t \t \t color: white; 
 
\t \t \t \t text-decoration: none; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t .naviMenu ul li:hover { 
 
\t \t \t \t background-color: #111; 
 
\t \t \t }

<div class="naviMenu"> 
 
\t \t \t \t <ul> 
 
\t \t \t \t \t <li><div id="homePage">Home</div></li> 
 
\t \t \t \t \t <li><a href="about.html">About</a></li> 
 
\t \t \t \t \t <li>Text</li> 
 
\t \t \t \t \t <li><a href="photo.html">Photo</li> 
 
\t \t \t \t \t <li><a href="special.html">Special Project</li> 
 
\t \t \t \t \t <li><a href="contact.html">Contact</li> 
 
\t \t \t \t </ul>

スクリーンショット

ありがとうございます。

Answer 1

あなたのマークアップは、リンクの代わりに閉じタグとdivが欠けていると少し壊れています。しかし、あなたがやっていることは、まっすぐ進むことです - 少しだけ微調整する必要があります。アップ マーク：

<div class="naviMenu"> 
    <ul> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    </ul> 
</div> 

は、主な問題は、現在のli要素に持って左にフロートです。 CSS：

.naviMenu ul { 
    width: 100%; /* make it full width */ 
    background: #333; 
    text-align: center; /* align it center */ 
    list-style: none; 
} 
.naviMenu ul li { 
    display: inline-block; /* inline-block respects align center. allows padding */ 
    letter-spacing: 0.05em; 
    padding: 14px 16px; 
} 
.naviMenu ul li a { 
    color: #fff; 
    text-decoration: none; 
    text-transform: uppercase; 
} 

Codepen：http://codepen.io/anon/pen/ygLZXK

Answer 2

ここに行きます。あなたの所与のスクリーンショットを1として

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    text-transform: uppercase; 
 
    text-align: center; 
 
    background-color: #333; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    z-index: 1; 
 
} 
 
.naviMenu ul li { 
 
    letter-spacing: 0.05em; 
 
    color: white; 
 
    padding: 14px 16px; 
 
    display: inline-block; 
 
    font-size: 14px; 
 
} 
 
.naviMenu ul li a { 
 
    color: white; 
 
    text-decoration: none; 
 
} 
 
.naviMenu ul li:hover { 
 
    background-color: #111; 
 
}

<div class="naviMenu"> 
 
    <ul> 
 
    <li> 
 
     <div id="homePage">Home</div> 
 
    </li> 
 
    <li><a href="about.html">About</a> 
 
    </li> 
 
    <li>Text</li> 
 
    <li><a href="photo.html">Photo</a> 
 
    </li> 
 
    <li><a href="special.html">Special Project</a> 
 
    </li> 
 
    <li><a href="contact.html">Contact</a> 
 
    </li> 
 
    </ul> 
 
</div>