タグ付けされた質問 「css」

私のウェブサイトでGoogleのRobotoフォントを使用したいのですが、このチュートリアルに従っています： http://www.maketecheasier.com/use-google-roboto-font-everywhere/2012/03/15 次のようなフォルダ構造のファイルをダウンロードしました。 今私は3つの質問があります： 私のmedia/css/main.cssURLにCSSがあります。それで、そのフォルダをどこに置く必要がありますか？ すべてのサブフォルダーからすべてのeot、svgなどを抽出してフォルダーに入れる必要がありfontsますか？ cssファイルfonts.cssを作成し、ベーステンプレートファイルに含める必要がありますか？ 彼がこれを使用する例 @font-face { font-family: 'Roboto'; src: url('Roboto-ThinItalic-webfont.eot'); src: url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'), url('Roboto-ThinItalic-webfont.woff') format('woff'), url('Roboto-ThinItalic-webfont.ttf') format('truetype'), url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (under the Apache Software License). font-weight: 200; font-style: italic; } 次のようなdir構造が必要な場合、私のURLはどのように見えるべきですか？ /media/fonts/roboto

164 html  css  fonts 

IE7のz-indexバグの小さなテストケースを分離しましたが、それを修正する方法がわかりません。私はz-index一日中遊んでいます。 z-indexIE7の何が問題になっていますか？ CSSのテスト： input { border: 1px solid #000; } div { border: 1px solid #00f; } ul { border: 1px solid #f00; background-color: #f00; list-style-type: none; margin: 0; padding-left: 0; z-index: 1000; } li { color: #fff; list-style-type: none; padding-left: 0; margin-left: 0; } span.envelope { position: relative; } …

163 css  internet-explorer-7  z-index 

その<img>要素が両方のように動作する場所を読んだことがあります。正しい場合、誰かが例を挙げて説明してもらえますか？

163 html  css  image 

jQueryを使用して、本文のスクロールを無効にしたいと思います。 私の考えは： セットする body{ overflow: hidden;} 現在をキャプチャ scrollTop();/scrollLeft() bodyスクロールイベントにバインドし、scrollTop / scrollLeftをキャプチャした値に設定します。 もっと良い方法はありますか？ 更新： 私の例とその理由をhttp://jsbin.com/ikuma4/2/editで見てください 私は誰かが「なぜ彼は単にposition: fixedパネルで使用しないのですか？」と考えていることを知っています。 他の理由があるので、これを提案しないでください。

163 jquery  css  scroll 

jQueryを使用してアップロードボックス（参照ボタン）をトリガーしようとしています。 私が今試した方法は： $('#fileinput').trigger('click'); しかし、それは機能していないようです。助けてください。ありがとうございました。

163 javascript  jquery  css 

フォームのみが存在するページがあり、フォームを画面の中央に配置したい。 <div class="container"> <div class="row justify-content-center align-items-center"> <form> <div class="form-group"> <label for="formGroupExampleInput">Example label</label> <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input"> </div> <div class="form-group"> <label for="formGroupExampleInput2">Another label</label> <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input"> </div> </form> </div> </div> justify-content-center水平方向のフォームを揃えたが、私は垂直に整列する方法を見つけ出すことはできません。私が使用しようとしましたalign-items-centerとalign-self-center、それは動作しません。 何が欠けていますか？ デモ

163 css  twitter-bootstrap  bootstrap-4  centering 

WebKit / Blink（Safari / Chrome）のMacOS 10.7（Mac OS X Lion）以降のデフォルトの動作では、トラックパッドユーザーが使用していないときはスクロールバーを非表示にします。これは混乱を招く可能性があります。多くの場合、スクロールバーは、要素がスクロール可能であることを示す唯一の視覚的な手掛かりです。 例（jsfiddle） HTML <div class="frame"> Foo<br /> Bar<br /> Baz<br /> Help I'm trapped in an HTML factory! </div> CSS .frame { overflow-y: auto; border: 1px solid black; height: 3em; width: 10em; line-height: 1em; }​ WebKit（Chrome）スクリーンショット Presto（Opera）スクリーンショット WebKitのスクロール可能な要素に常にスクロールバーを表示させるにはどうすればよいですか？

162 css  macos  webkit  scrollbar  blink 

私はこの質問を見てグーグルで調べましたが、これまでのところ何も機能していません。私はそれが2010年であると考えています（これらの質問/回答は古く、未回答です）。CSS3があります！CSSを使用してdivでテーブルセル全体の幅と高さを埋める方法はありますか？ セルの幅や高さが事前にどのようになるかわからないため、divの幅と高さを100％に設定しても機能しません。 また、divが必要な理由は、一部の要素をセルの外側に絶対的に配置する必要があるためであり、sにposition: relativeは適用されないtdため、ラッパーdivが必要です。

162 css 

Appleのオーバーレイは単なる透明度ではないようです。CSSやおそらくJSでこの効果を実現する方法についてのアイデアはありますか？

161 javascript  css  user-interface  blur 

休業。この質問は意見に基づいています。現在、回答を受け付けていません。 この質問を改善してみませんか？この投稿を編集して、事実と引用で回答できるように質問を更新してください。 5年前休業。 この質問を改善する 最近Flexbox、divを同じ高さにするためのソリューションを探していたときに、最高のものに依存することを発見しました。 CSS-tricks.com の次のページを読んだところ、flexbox学習と使用が非常に強力なモジュールであると確信しました。ただし、Twitterブートストラップ（および類似のフレームワーク）がグリッドシステムと同じような機能（もちろん、さらに多くの機能）を提供しているという事実についても考えさせられました。 さて、質問は次のとおりflexboxです。の長所と短所は何ですか？Flexboxでできない、Bootstrapのようなフレームワークでできることはありますか（もちろん、純粋にグリッドシステムについて話しています）。ウェブサイトに実装するとどちらが速いですか？ グリッドシステムだけの場合flexbox、純粋にを使用する方が賢明だと思いますが、すでにフレームワークを使用している場合、何かflexbox追加できるものはありますか？ flexboxフレームワークよりも「グリッドシステム」を選択する理由はありますか？

161 html  css  twitter-bootstrap  flexbox 

リストの最後の子を選択できるcssセレクターを探しています。 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <!-- select the pre last item dynamically no matter how long this list is --> <li>6</li> </ul> 静的メソッド： ul li:nth-child(5) 動的な方法： ul li:last-child(-1) もちろんこれは検証しません。また、nth-last-childは動的な方法を提供していないようです。JavaScriptにフォールバックできますが、見落としたcss方法があるかどうか疑問に思っています

161 css  css-selectors 

トリッキーなCSSセレクターの質問です。それが可能かどうかはわかりません。 これがHTMLレイアウトであるとしましょう： <div></div> <div></div> <div></div> <div style="display:none"></div> <div style="display:none"></div> div表示されている最後のを選択したい（つまり、ではないdisplay:none）。これはdiv、与えられた例では3番目になります。div実際のページのs の数は（1でもdisplay:none）異なる場合があります。

161 html  css  css-selectors 

のようなコード表現が必要#FFFFFFです。

161 html  css 

次のレイアウトを想像してください。ドットはボックス間のスペースを表しています。 [Left box]......[Center box]......[Right box] 右のボックスを削除しても、次のように、中央のボックスがまだ中央にあるのが好きです。 [Left box]......[Center box]................. 左のボックスを削除する場合も同様です。 ................[Center box]................. これで、中央のボックス内のコンテンツが長くなると、中央に配置されたままの状態で、必要なだけのスペースが必要になります。スペースが残っていないところ際に、左と右のボックスは、このように縮小し、決してだろうoverflow:hiddenとtext-overflow: ellipsisコンテンツを破るために有効になるだろう。 [Left box][Center boxxxxxxxxxxxxx][Right box] 上記のすべてが私の理想的な状況ですが、私はこの効果を達成する方法がわかりません。なぜなら私がそのようなフレックス構造を作成するとき： .parent { display : flex; // flex box justify-content : space-between; // horizontal alignment align-content : center; // vertical alignment } 左と右のボックスがまったく同じサイズであれば、希望する効果が得られます。ただし、2つのうちの1つが異なるサイズのものである場合、中央に配置されたボックスは真に中央に配置されなくなります。 私を助けることができる人はいますか？ 更新 A justify-selfはいいでしょう、これは理想的です： .leftBox { justify-self : flex-start; …

161 html  css  flexbox  centering 

max-height以前に一部のCSSルールで設定されている場合、プロパティをデフォルトにリセットするにはどうすればよいですか？これは機能しません： pre { max-height: 250px; } pre.doNotLimitHeight { max-height: auto; // Doesn't work at least in Chrome }

161 css