問題タブ [yui-pure-css]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
966 参照

html - 水平レスポンシブ ナビゲーション バー PureCSS のトラブル

垂直メニューのレイアウトと組み合わせたPure CSSを使用しています。しかし、縦のサイド メニューの代わりに、最小画面幅が小さすぎる場合に画面の上部に消える横のメニューになるようにコードを調整しようとしています。かなり近いようですが、最小幅に達するとメニューが消えません。スニペットで全画面表示にして、ウィンドウのサイズを小さく/大きくしてみてください。私は何を間違っていますか?

http://jsfiddle.net/ov3f2gLr/

0 投票する
3 に答える
1438 参照

css - PureCSS と CSS メニューのドロップダウン

私は PureCSS を使用しようとしており、CSS を使用してメニュードロップダウンを取得しようとしています (移植性の理由から YUI または Jquery を使用するのではなく)。

これは私がこれまでに持っているものです:

http://jsfiddle.net/ket262p3/3/

と:

根本的な問題は、2 番目のレベルのメニューが表示されない原因となる purecss の微妙な部分である可能性があると思います。

余分なクラスは無視してください。これらは、これを YUI または JQuery で動作させるための初期段階を表しています。

0 投票する
2 に答える
576 参照

css - PureCSS Grid が Firefox を中心としていない

私は自分の Web サイトでPureCSSを試していますが、すべてうまくいっているように見えました。Firefox で開いたところ、コンテンツが中央に配置されていないことに気付きました。

私のサイトはこちらからご覧いただけます。

HTML/CSS はとてもシンプルです。<div class="content pure-u-1 pure-u-md-3-5">インスペクター ツールを開くと、幅 60% で正しくレンダリングされていることがわかります。もしそうなら、なぜそうではないのか

コンテンツを Firefox の中央に配置するには? Chrome ではすべて正常に動作します。フロントエンドの作業を行ってからしばらく経ちましたが、簡単に検索したところ、まだmargin: 0 auto;センタリングを推奨している人がいるので、これはグリッド フレームワークと関係があると思いますか? また、すべてをに設定していbox-sizing: border-box;ます。

0 投票する
1 に答える
2519 参照

css - 純粋な css でネストされたグリッドを使用する方法の例

ドキュメントには、ネストされたグリッドの例は含まれていません。誰かがネストされたグリッドの例を投稿できますか

0 投票する
1 に答える
1799 参照

html - テーブルを画面幅に合わせる // purecss

Web ページのデザインに純粋な CSS を使用しています。私のページにこのテーブル/フォームがあります。残念ながら、それは私の画面の幅を超えています。画面に収まるようにテーブルを自動的にフォーマットするにはどうすればよいですか? テーブルがユーザーの画面幅に収まるまで、各列を「縮小」したいと思います。

0 投票する
3 に答える
1720 参照

html - purecss pure-menu-item が正しく動作しない

このメニュー コードはhttp://purecss.io/menus/の最初の例です。

それでもうまくいきません:(

<li>アイテムは、互いに画面いっぱいの距離を保っています。下にスクロールすると、他の項目が表示されます。

しかし、それは purecss.io/menus ページで動作します。どうしてか分かりません。

(ここで実行しても問題なく動作します... このコードで html ドキュメントを作成する必要がありますが、失敗します...)

があるのを見たことpure-menu-itemがありheight: 100%ますが、これは少し奇妙だと思います。これが問題ですか?

0 投票する
1 に答える
706 参照

css - 純粋な CSS: Firefox と Opera でレスポンシブ画像がボーダーボックスとパディングで列を分割する

WordPress のテーマ / レイアウトの基礎として、Yahoo Pure CSS のレスポンシブ グリッドを使用しています。

http://smartwatchapps.co.uk/module-test/

画像のない列は問題ありません。画像が存在する場合、列は FF と Opera で展開されます。クローム/サファリOK。

これは、 http://purecss.io/grids/に従って、box-sizing:border-box と水平パディングを Pure ユニットに追加すると発生します。

ピュア ユニットの box-sizing:border-box とパディングを削除し、ピュア ユニット内の div に追加すると、同じことが起こります。

幅の追加: 100% は FF と Opera のオーバーフロー画像を修正しますが、もちろんこれによりすべての画像がコンテナーの 100% 幅になります (たとえば、このページの OJ の小さな画像は、コンテナーの 100% を埋めるように拡張されます)。実行可能な解決策ではありません。

pure-g が別のページ内にネストされていない他のページでは発生しないようです。

http://smartwatchapps.co.uk/markup-image-alignment/

どんなアイデアでも大歓迎です。