1

ページの中央にナビゲーションバーを配置したいのですが、どうしたらよいかわかりません。これが私のコードです。

CSS

ul {
  list-style-type:none;
  margin:0;
  padding:0;
  overflow:hidden;
}
li {
  float:left;
}
a {
  display:block;
  width:80px;
  background-color:#000000
}

HTML

<ul>
  <li><a href="http://kevril.site40.net/">Home</a></li>
  <li><a href="http://www.youtube.com/user/SuperKevril">Youtube</a></li>
</ul>
4

2 に答える 2

7

ブロックレベルの要素を中央に配置するのは簡単です。aを定義しwidthて設定するだけmargin:0 auto;ですが、その固定幅がわからない場合はどうでしょうか。を使用することもできますtext-align:center;が、それはwidth:100%ブロックレベルの要素でも機能しません…テキストレベルの要素でのみ機能します。

width明示的に定義heightすると、ドキュメントの将来性、柔軟性、拡張性が大幅に低下するため、可能な限り常に避ける必要があります。ナビゲーションメニューに4つの項目があるとします。widthこれらを解決して、中央に配置するために使用できmargin:0 auto;ます。5分の1を追加すると幅が広がります。つまり、CSSも変更する必要があります。これは理想からはほど遠いものであり、サイトを強化するCMSを使用する場合はさらにそうです（クライアントはページを追加できますが、CSSを編集できない可能性があります）。

ただし、明示的な幅を知らずに、CSSを追加せずに、水平方向のナビゲーションを中央に配置する方法があります。また、非常に簡単です。これを試して：

HTML：

<ul class="nav">
  <li><a href="/">Home</a></li>
  <li><a href="/about/">About</a></li>
  <li><a href="/work/">Work</a></li>
  <li><a href="/clients/">Clients</a></li>
  <li><a href="/contact/">Contact</a></li>
</ul>

CSS：

.nav{
    border:1px solid #ccc;
    border-width:1px 0;
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
}
.nav li{
    display:inline;
}
.nav a{
    display:inline-block;
    padding:10px;
}
于 2013-03-15T00:37:05.347 に答える
1

これを試して：

position: relative;
margin: auto;
于 2013-03-15T00:33:04.690 に答える