0

新しいcss3テクニックのいくつかを使用して垂直ナビゲーションメニューを作成しようとしていますが、これまでのところ、目的の外観に最も近いdisplay:table. display:table/table-row/table-cell主に「セル」をテーブル形式に制限するため (たとえば、「行」または「セル」に余白を設けることはできません)、またdivs、垂直にリストします。私がもともとこの方向に進んだ理由はvertical-align: middle、テキストに使用することでした。フレックスボックスメソッドを使用しようとすると、両方のテキスト行が同じ行に配置され続け、それらを分割する方法がわかりませんでした。

同じ外観をより柔軟に、できれば余分な div なしで実現するのを手伝ってもらえますか?

メソッドの実例display: table（完全に中央に配置されているようには見えません）：http://jsfiddle.net/jKRDQ/

フレックスボックス方式を使用して最も近いもの: http://jsfiddle.net/4wSN5/

CSS3 なしで最も近い: http://jsfiddle.net/6gRcp/

4

1 に答える 1

3

テーブルメソッドに無効なマークアップがあります。要素のみがまたは要素liの子になることができます。その余分なものが必要な場合は、の中にある必要があります。uloldivli

box-orientationFlexboxメソッドに/がありませんflex-direction。デフォルトでは、horizontal/rowに設定されます。これにより、すべてが連続して表示されます。のCSSは次のliようになります。

http://jsfiddle.net/4wSN5/1/

#slide-out-menu li {
  width: 75px;
  height: 75px;
  border: 1px solid black;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -webkit-flex-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

horizontalまたは、 /の向きを維持してラッピングを使用することもできますがrow、これは標準仕様をサポートするブラウザーでのみ機能します（実験的なFlexboxサポートが有効になっているFirefoxを除く）。

Firefoxの実装が非常に悪いため、Firefoxのプレフィックスを削除する必要がある場合があります。私のSassミックスインがそれらを放出するので、私はそれらを含めただけです。

Flexboxを使用する場合は、2009仕様のプロパティを単独で使用しないでください。OperaとChrome（両方とも-webkit-プレフィックスの下）は古い仕様と新しい仕様の両方をサポートしていますが（Operaは新しい仕様ではプレフィックスがありません）、古い仕様は最終的に削除されます。

于 2013-03-16T12:33:14.290 に答える