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

MS Wordで設定できるように、CSSで行間を設定するにはどうすればよいですか？

145 css  line 

「x」をスパンの中央に垂直に配置するにはどうすればよいですか？ .foo { height: 50px; border: solid black 1px; display: inline-block; vertical-align: middle; } <span class="foo"> x </span>

144 html  css 

.offset([coordinates])メソッドは要素の座標を設定しますが、ドキュメントに対してのみです。次に、要素の座標を親に対して相対的に設定するにはどうすればよいですか？ 見つけた .position()メソッドは、親に相対的な「上、左」の値のみを取得する、値は設定されていません。 私が試した $("#mydiv").css({top: 200, left: 200}); しかし動作しません。

144 jquery  css  jquery-selectors  positioning  css-position 

ラベルタグには 'width'プロパティがないので、ラベルタグの幅を制御するにはどうすればよいですか？

144 html  css  label 

私は読んでいたこのstackoverflowの記事「？あなたはインラインフレームを応答することはできます」というタイトルを、そしてコメント/答えの一つが私を導いた、このjfiddle。 しかし、自分のニーズに合うようにHTMLとCSSを実装しようとしたとき、同じ結果/成功がありませんでした。私は自分のJSフィドルを作成しました。私が使用しているiFrameのタイプと何らかの関係があると確信しています（たとえば、製品の画像も応答性が必要な場合など）。 私の主な懸念は、ブログの読者がiPhoneで私のブログにアクセスするときに、すべてをx幅（すべてのコンテンツに対して100％）にしたくないので、iFrameが正しく動作せず、唯一の要素が広くなる（したがって、スティックする）ことです。他のすべてのコンテンツを超えて-それが理にかなっている場合??） とにかく、なぜそれが機能しないのか誰か知っていますか？ありがとうございました。 MY JSFIDDLEのHTMLとCSSは次のとおりです（リンクをクリックしたくない場合）。 <div class="wrapper"> <div class="h_iframe"> <!-- a transparent image is preferable --> <img class="ratio" src="http://www.brightontheday.com/wp-content/uploads/2013/07/placeholder300.png" /> <iframe frameborder='0' height='465px' width='470px' scrolling='no' src='http://currentlyobsessed.me/api/v1/get_widget?wid=30&blog=Brighton+The+Day&widgetid=38585' frameborder="0" allowfullscreen></iframe> </div> </div> これが付随するCSSです。 .wrapper { width: 100%; height: 100%; margin: 0 auto; background: #ffffff; } .h_iframe { position: relative; } .h_iframe …

144 css  iframe  responsive-design 

各リスト要素の後に小さな画像を挿入する最良の方法は何でしょうか？疑似クラスで試してみたが何かがおかしい… ul li a:after {display: block; width: 3px; height: 5px; background: url ('../images/small_triangle.png') transparent no-repeat;} 助けてくれてありがとう！

144 css 

常に表示される「前へ」ボタンと「次へ」ボタンを備えたカルーセルを作成しました。これらのボタンにはホバー状態があり、青色に変わります。iPadのようなタッチデバイスでは、ホバー状態が固定されているため、ボタンをタップしても青色のままになります。それは欲しくない。 各ボタンのno-hoverクラスontouchendを追加して、CSSを次のようにすることもできます。button:not(.no-hover):hover { background-color: blue; }ただし、これはおそらくパフォーマンスにかなり悪影響を及ぼし、Chromebook Pixel（タッチスクリーンとマウスの両方を備えている）などのデバイスを正しく処理しません。 にtouchクラスを追加しdocumentElementて、CSSを次のようにするhtml:not(.touch) button:hover { background-color: blue; }こともできます。ただし、タッチとマウスの両方を備えたデバイスでは正しく機能しません。 私が好むのは、ホバー状態を削除することontouchendです。しかし、それは可能ではないようです。別の要素にフォーカスしても、ホバー状態は削除されません。別の要素を手動でタップすると動作しますが、JavaScriptでそれをトリガーできないようです。 私が見つけたすべてのソリューションは不完全に見えます。完璧な解決策はありますか？

144 javascript  css  hover  touch 

私はElectronでアプリを設計しているので、CSS変数にアクセスできます。で色変数を定義しましたvars.css： :root { --color: #f0f0f0; } この色をで使用したいのですmain.cssが、不透明度が適用されています。 #element { background: (somehow use var(--color) at some opacity); } これを行うにはどうすればよいですか？プリプロセッサは使用せず、CSSのみを使用しています。私はすべてCSSの答えを望みますが、JavaScript / jQueryを受け入れます。 opacity透明にしてはいけない背景画像を使っているので使えません。

144 css  colors  css-variables 

CSSを使用してjQueryスライドダウンセクションのトリガーテキストを示しています。つまり、トリガーテキストにカーソルを合わせると、カーソルがポインターに変わり、トリガーテキストの不透明度が低下して、テキストにクリックアクションがあることが示されます。 。 これはFirefoxとChromeでは問題なく動作しますが、IE8では不透明度は変わりません。 さまざまなCSS設定を試しましたが、成功しませんでした。 例えば HTML： <h3 class="slidedownTrigger">This is the trigger text</h3> CSS： .slidedownTrigger { cursor: pointer; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; filter: alpha(opacity=75); -khtml-opacity: 0.75; -moz-opacity: 0.75; opacity: 0.75; } IEが不透明度を変更するのを止めているのは何ですか？注：私はこれをさまざまな異なる要素で試し、CSSステートメントの順序を入れ替え、IEのものだけを使用しました。私も使ってみました -ms-filter: "alpha(opacity=75)"; しかし、成功しませんでした。 IE8で不透明度の変更を機能させるために必要なものが不足しています。 何か案は？

143 css  internet-explorer-8  opacity 

現在のところ、この質問はQ＆A形式には適していません。事実、参考文献、専門知識によって回答が裏付けられることを期待していますが、この質問は、討論、議論、投票、または拡張ディスカッションを求める可能性があります。この質問が改善され、場合によっては再開できると思われる場合は、ヘルプセンターにアクセスしてください。 7年前休業。 Firebugは、CSSを編集するために私が見つけた最も便利なツールです。なぜCSSに単純な「保存」オプションがないのですか？ 私は常にFirebugで微調整を行っていることに気づき、次に元の.cssファイルに戻って微調整を複製しています。 誰かがより良い解決策を考え出しましたか？ 編集：私はコードがサーバーに保存されていることを知っていますが（ほとんどの場合私自身ではありません）、私は自分のウェブサイトを構築するときにそれを使用します。 Firebugは、Firefoxがサーバーからダウンロードした.cssファイルを使用するだけで、どのファイルのどの行を編集しているかを正確に把握しています。新しい.cssファイルを保存できる「エクスポート」または「保存」オプションがない理由がわかりません。（私はそれからリモートのものを置き換えることができました）。 一時的な場所を調べて、[ファイル] > [ 保存...]を選択し、Firefoxで出力オプションを試してみましたが、それでも方法が見つかりませんでした。 編集2： 公式ディスカッショングループには多くの質問がありますが、回答はありません。

143 css  firebug 

Chromeのユーザーエージェントスタイルシートは、<select>要素のすべての隅に5pxのborder-radiusを与えます。私は、外部のスタイルシートに0pxの半径を適用し、要素自体にインライン化することによって、これを取り除くことを試みました。私は両方border-radius:0pxを試し-webkit-border-radius:0px;ましたが、さらに具体的なものを試しましたborder-top-left-radius:0px（それに相当するのは-webkitです）。 どれも動作していません。 Webkitの開発者ツールで要素を調べても、計算済みスタイルで半径が5pxと表示されます。しかし、詳細を表示するためにその横の展開矢印をクリックすると、element.style-0pxと表示されます。その下には、0pxのユーザーcss仕様と、5pxのユーザーエージェントスタイルシート仕様が示されています。そして、後者の2つは、本来あるべきように、取り消し線が引かれています。 何か案は？

143 select  webkit  css 

私は3つのレベルがありdivます： （緑色以下）トップレベルdivを有しますoverflow: hidden。これは、ボックスのサイズを超える場合、そのボックス内の一部のコンテンツ（ここには表示されていません）をトリミングしたいためです。 （中には、下記赤）、この内部では、私が持っているdivとposition: relative。これは、次のレベルでのみ使用できます。 （下の青で）最後divに、フローから取り出しましたが、ページに対してではなくposition: absolute、赤に対して配置したいと思いdivます。 青いボックスを流れから外して、緑のボックスを超えて拡張させたいのですが、次のように赤いボックスに対して相対的に配置します。 しかし、以下のコードで、私は得ます： そしてposition: relative、赤いボックスのを削除すると、青いボックスが緑のボックスから出ることが許可されますが、赤いボックスに対して相対的に配置されなくなります。 方法はありますか： overflow: hidden緑色のボックスに保管してください。 青色のボックスが緑色のボックスを超えて拡大し、赤色のボックスに相対的に配置されていますか？ 完全なソース： #d1 { overflow: hidden; background: #efe; padding: 5px; width: 125px; } #d2 { position: relative; background: #fee; padding: 2px; width: 100px; height: 100px; } #d3 { position: absolute; top: 10px; background: #eef; padding: 2px; …

143 css  overflow  css-position 

私が欲しいのは、緑の背景がテキストのすぐ後ろにあり、ページ幅の100％ではないことです。これが私の現在のコードです： h1 { text-align: center; background-color: green; } <h1>The Last Will and Testament of Eric Jones</h1> コードスニペットを実行する結果を非表示スニペットを展開

143 html  css 

私は他の質問を検索しましたが、この問題は他のいくつかの問題と似ているようですが、今のところ、私が抱えている問題に対処しているようには見えません。 他のdivを多数含むdivがあり、それぞれが左にフロートされています。これらのdivにはそれぞれ写真とキャプションが含まれています。必要なのは、写真のグループが含まれているdivの中央に配置されることだけです。 以下のコードからわかるように、私は両方overflow:hiddenとmargin:x auto親div を使用してみました。またclear:both、写真の後に（別のトピックで提案されているように）を追加しました。違いは何もないようです。 ありがとうございました。私はどんな提案にも感謝します。 <div style="position: relative; margin: 0 auto; overflow: hidden; text-align: center;"> <h4>Section Header</h4> <div style="margin: 2em auto;"> <div style="float: left; margin: auto 1.5em;"> <img src="photo1.jpg" /><br /> Photo Caption </div> <div style="float: left; margin: auto 1.5em;"> <img src="photo2.jpg" /><br /> Photo Caption </div> <div style="float: …

142 html  center  css 

bootstrapdivを右にフロートさせる適切な方法は何ですか？pull-rightお勧めの方法だと思いましたが、うまくいきません。 @import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); .container { margin-top: 10px; } <div class="container"> <div class="row-fluid"> <div class="span6"> <p>Text left</p> </div> <div class="span6 pull-right"> <p>text right</p> </div> </div> </div> コードスニペットを実行する結果を非表示スニペットを展開

142 html  css  twitter-bootstrap