0

ヘッダー>セクションを中央に配置しようとしています。Chrome と Opera では問題なく動作しますが、Firefox では左側にプッシュされます。.bodyとという名前のクラスを作成しましwidth: 960pxたmargin: 0 auto。firefoxでは認識されませんmargin: 0 auto（私はfirefox 18を使用しています）。

クラスのdisplay値をinline-blockに設定しようとしました。.body中央に配置しますが、下に押しnavます（すべてのブラウザの場合）。

これは私がやろうとしていることです

HTML

<header id="header">
<section class="body box">
  <section class="flex1">
    <a>MyWebsiteName</a>
  </section>
  <nav class="nav-list flex1">
    <ul>
      <li>
        <a href="">Login</a>
      </li>
      <li><a href="">Register</a></li>
      <li><a href="">Help</a></li>
    </ul>
  </nav>
</section>

CSS

.box {
  display: -webkit-box;
  display: -moz-box;
  display: -o-box;
  display: box;
 -webkit-flex-direction: row;
 -mox-flex-direction: row;
 flex-direction: row;
 -webkit-box-align: center;
 -moz-box-align: center;
 -o-box-align: center;
 box-align: center;
}

.flex1 {
 -webkit-box-flex: 1;
 -moz-box-flex: 1;
 -o-box-flex: 1;
 box-flex: 1;
}

.body {
  clear: both;
  width: 960px;
  margin: 0 auto;
}

header {
  background: #0C2C52;
  box-shadow: 0 0 .2em .1em rgb(78, 76, 76);
 -webkit-box-shadow: 0 0 .2em .1em rgb(78, 76, 76);
 -moz-box-shadow: 0 0 .2em .1em rgb(78, 76, 76);
 margin-bottom: 1em;
 padding: 1em 0;
}

header > section {
  height: inherit;
}

#header section.flex1 {
  display: inline-block;
}

.nav-list {}

.nav-list > ul {
  float: right;
}
4

2 に答える 2

0

これはあなたを変えるビットですmargin: 0 auto;：

.box {
  display: -moz-box;
}

だけ残しておけば問題ありません<section class="body">。jsfiddleの例

于 2013-02-19T08:44:03.000 に答える
0

答えは完璧ではありませんが、かなり便利です。

個人的には、ブラウザー開発チーム (Microsoft、Mozilla など) がアプリケーションの HTML インターフェースの計画でうまく連携できていないことに不満を感じています。W3C は、これらの企業に対してまだ強制力がありません。これは、2014 年に近づいている現在でも、これらのばかげた不満レベルの問題を抱えている私たちにとって大きな欠点です。この業界で 10 年を過ごしている私は、少し動揺しています。以下の回答を参照してください...（それに応じて幅を設定してください）

答え

<style type="text/css">
    .box_wrap{margin:0 auto;width:50%;}
</style>

<div class="box_wrap">
    <div class="your_flex_box"> ... </div>
</div>
于 2013-12-19T21:09:44.533 に答える