1

次のナビゲーション バーがあります。

<header>
  <h1>Blah blah</h1>
  <nav>
    <ul>
      <li><a href="#">foo</a>
      <li><a href="#">bar</a>
      <li><a href="#">baz</a>
      <li><a href="#">zop</a>
    </ul>
  </nav>
</header>

どうすれば完全に中央に配置できますか? 次のcssもあります。

header {
    background-color: #a4c9f3;
    text-align: center;
}
header nav {
    /* guessing this width works, but I don't want to do it manually */
    /* width: 24em; */
    display: inline-block;
}
header nav ul li {
    float: left;
    padding: 0 0 0 6px;
    list-style: none;
}
header nav ul li a {
    padding: 9px 22px 4px 16px;
    background-color: #83b2e6;
}

このjsfiddleでわかるように、ほぼ中央に配置されています。

4

2 に答える 2

1

に変更ulし width: 100%てテキストを中央に配置し、liasに設定しますdisplay: inline。アンカーをインライン ブロックとして表示します。

CSS:

header {
    background-color: #a4c9f3;
    text-align: center;
}
header nav ul {
    width: 100%;
    text-align: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
header nav ul li {
    display: inline;
}
header nav ul li a {
    padding: 9px 22px 4px 16px;
    display: inline-block;
    background-color: #83b2e6;
}

更新されたフィドル

于 2013-11-13T15:10:03.427 に答える
0

ul 要素と li 要素からデフォルトのパディング/マージンを削除するだけで済みます。Eric Meyer の reset などのリセット CSS スタイルシートを使用できます。

header nav ul, header nav ul li{
    margin: 0;
    padding: 0;
}

デモ作業: http://jsfiddle.net/YkZqj/13/ CSS リセット: http://meyerweb.com/eric/tools/css/reset/

于 2013-11-13T14:27:15.847 に答える