1

次のメニューを作成しているときに、奇妙な状況に遭遇しました。padding-left: 7px;Chrome/Safari (Mac) では、追加すると最後のメニュー項目が壊れます<ul> が、それが Firefox と Chrome for Windows の中央にメニューを表示できる唯一の方法でした。

メニューを中央に配置しようとしましdisplay: block; margin: 0 auto;たが、うまくいきませんでした。私は可能な解決策を使い果たしたと思います。

返信をお待ちしております。

乾杯！

4

3 に答える 3

1

これはおそらく、Chrome がフォントをわずかに異なる方法でレンダリングしており、数ピクセルの違いがあるためです (この場合、画面幅に対して約 4 または 5 ピクセル)。

パディングなどなしでナビゲーションを中央に配置するために、私が少し前に拾ったちょっとしたトリックがあります：

.site-header .site-nav ul {
  display: table;
  margin: 0 auto; }

.site-header .site-nav li {
  display: block;
  float: left; }

auto left と right を除いて、ul には他のマージンやパディングがないことに注意してください。また、li がフロートされているため、clearfix で ul をクリアする必要があります。

または、使用したくない場合は、ul でdisplay:table同じことを行ってから、display:inline-blocktext-align:center.site-nav

于 2013-08-15T14:30:01.493 に答える