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

次のマークアップを考えると、CSSを使用して、1つのセル（列内のすべてのセル）を、ストレッチ（デフォルトの動作）ではなく、その中のコンテンツの幅に合わせることができますか？ <style type="text/css"> td.block { border: 1px solid black; } </style> <table style="width: 100%;"> <tr> <td class="block">this should stretch</td> <td class="block">this should stretch</td> <td class="block">this should be the content width</td> </tr> </table> 編集：私は幅をハードコーディングできることを知っていますが、その列に入るコンテンツは動的であるため、私はむしろそれをしたくありません。 下の画像を見ると、最初の画像はマークアップが生成するものです。2番目の画像は私が欲しいものです。

266 html  css  html-table 

親コンポーネントがあります： <parent></parent> そして、私はこのグループに子コンポーネントを入れたいです： <parent> <child></child> <child></child> <child></child> </parent> 親テンプレート： <div class="parent"> <!-- Children goes here --> <ng-content></ng-content> </div> 子テンプレート： <div class="child">Test</div> 以来parentとchild2つの別々のコンポーネントである、彼らのスタイルは、独自のスコープにロックされています。 私の親コンポーネントで私はやってみました： .parent .child { // Styles for child } しかし、.childスタイルはchildコンポーネントに適用されていません。 を使用styleUrlsして、スコープの問題を解決するためparentにchildコンポーネントにスタイルシートを含めようとしました： // child.component.ts styleUrls: [ './parent.component.css', './child.component.css', ] しかし、それは助けにはなりませんでした。childスタイルシートをにフェッチすることで別の方法を試しましたが、それも助けにparentはなりませんでした。 では、親コンポーネントに含まれている子コンポーネントをどのようにスタイルするのでしょうか。

266 css  angular  angular-components 

私は、CSSの参考文献に見ることができる画像透明度を設定する方法とどのように背景画像を設定する方法を。しかし、これらの2つを組み合わせて透明な背景画像を設定するにはどうすればよいですか？ 背景として使用したい画像がありますが、明るすぎます。不透明度を約0.2に下げたいのですが。これどうやってするの？ #main { background-image: url(/wp-content/uploads/2010/11/tandem.jpg); }

264 css 

<a>何らかの理由でアイコンをタグで囲む必要があります。 font-awesomeアイコンの色を黒に変更する方法はありますか？ それとも<a>タグで囲まれている限り不可能ですか？素晴らしいフォントは画像ではなくフォントであるはずですよね？ <a href="/users/edit"><i class="icon-cog"></i> Edit profile</a>

264 html  css  font-awesome 

これは私が試したものです（ここを参照してください）： body { overflow: hidden; } span { border: solid 2px blue; white-space: nowrap; text-overflow: ellipsis; } 基本的に、ウィンドウを小さくすると、省略記号でスパンが縮小するようにします。何を間違えたのですか？

264 html  css 

内部にリンクボタンがあり、<td>これを無効にする必要があります。これはIEでは機能しますが、FirefoxおよびChromeでは機能しません。構造は-内部のリンク<td>です。<td>（div / spanなど）にコンテナを追加できません 私は次のすべてを試しましたが、Firefoxでは機能しません（1.4.2 jsを使用）： $(td).children().each(function () { $(this).attr('disabled', 'disabled'); }); $(td).children().attr('disabled', 'disabled'); $(td).children().attr('disabled', true); $(td).children().attr('disabled', 'true'); 注-アンカータグは動的に登録されるため、クリックタグの登録を解除できません。また、リンクを無効モードで表示する必要があります。

263 javascript  jquery  html  css 

のサブパラグラフに分割されたテキストの大きなパラグラフがあります<br>。 <p> Blah blah blah. <br/> Blah blah blah. Blah blah blah. Blah blah blah. <br/> Blah blah blah. </p> 2つの<br>'s'やそのようなものがあるように、これらのサブパラグラフ間のギャップを広げたいです。これを行う正しい方法はを使用すること<p></p>ですが、現時点ではこのレイアウトを変更できないため、CSSのみのソリューションを探しています。 私は設定を試してみた<br>のline-heightとheightでdisplay: block、私はまた、簡単にGoogleで検索し、スタックオーバーフロー-編が、任意の解決策を見つけることができませんでした。これはレイアウトを変更せずに可能ですか？

263 html  css 

:before別の画像の上に画像を配置するためにセレクターを使用しようとしていますが、img要素の前に画像を配置するだけでは機能せず、他のいくつかの要素しか見つかりません。具体的には、私のスタイルは次のとおりです。 .container { position: relative; display: block; } .overlay:before { content: url(images/[someimage].png); position: absolute; left:-20px; top: -20px; } そして、これはうまくいくことがわかります： <a href="[url]" class="container"> <span class="overlay"/> <img width="200" src="[url]"/> </a> しかし、これはしません： <a href="[url]" class="container"> <img width="200" src="[url]" class="overlay"/> </a> その代わりにdivまたはp要素を使用することができspan、ブラウザーは私の画像をimg要素内の画像の上に正しくオーバーレイしますが、オーバーレイクラスをimgそれ自体に適用すると機能しません。 余分にspan気分を害するので、これを機能させたいのですが、さらに重要なのは、変更したい約100のブログ投稿があり、スタイルシートを変更することができれば、これを一度に実行できることです。しかし、前に戻っspanてa、img要素と要素の間に余分な要素を追加する必要がある場合、これはより多くの作業になります。

262 html  css 

CSSはDivをページの下部にプッシュします そのリンクを見てください、私は反対が欲しいです：コンテンツがスクロールバーにオーバーフローするとき、私はフッターが常にスタックオーバーフローのようにページの完全な下部にあることを望みます。 私はdiv id="footer"とこのCSS を持っています： #footer { position: absolute; bottom: 30px; width: 100%; } ただし、ビューポートの下部に移動するだけで、下にスクロールしてもそのまま表示されるため、下部に表示されなくなります。 画像： 明確にされていない場合は申し訳ありませんが、私はそれがすべてのコンテンツの実際の下部にあるためにのみ修正されることを望んでいません。

261 css  positioning  css-position  footer 

多くの行を含むHTMLテーブルを印刷する必要があるプロジェクトがあります。 私の問題は、表が複数ページにわたって印刷される方法です。場合によっては、行が半分にカットされ、半分がページの端にあり、残りが次のページの上部に印刷されるため、読み取れなくなります。 私が考えることができる唯一のもっともらしい解決策は、テーブルの代わりにスタックDIVを使用し、必要に応じて改ページを強制することです。しかし、全体の変更を行う前に、前にここで質問できると思いました。

261 html  css  printing  html-table 

存在しないCSSクラスを介してjQueryで列全体を表示/非表示にするテーブルがあります。 <table> <thead> <tr> <th></th> <th class="target"></th> <th></th> </tr> </thead> <tbody> <tr> <td></td> <td class="target"></td> <td></td> </tr> <tr> <td></td> <td class="target"></td> <td></td> </tr> </tbody> </table> このDOMを使用すると、jQueryを介して1行でこれを行うことができます。 $('.target').css('display','none'); これは完全に機能しますが、定義されていないCSSクラスを使用することは有効ですか？空のクラスを作成する必要がありますか？ <style>.target{}</style> 副作用はありますか、これを行うより良い方法はありますか？

260 html  css  w3c-validation  web-standards 

バナーとiframeを使用してWebページをデザインしたい。iframeが残りのすべてのページの高さを埋め、ブラウザのサイズが変更されると自動的にサイズ変更されることを願っています。CSSでのみ、JavaScriptコードを記述せずにそれを実行することは可能ですか？ 私はheight:100%iframeに設定してみましたが、結果はかなり近いですが、iframe 30pxはバナーdiv要素の高さを含むページ全体の高さを埋めようとしたため、不必要な垂直スクロールバーが表示されました。それは完璧ではありません。 更新メモ：質問をうまく説明できなかったので失礼します。CSVマージンを試し、DIVでパディング属性を使用して、Webページの再配置高さ全体を正常に占有しましたが、iframeではうまくいきませんでした。 <body> <div style="width:100%; height:30px; background-color:#cccccc;">Banner</div> <iframe src="http: //www.google.com.tw" style="width:100%; height:100%;"></iframe> </body> コードスニペットを実行する結果を非表示スニペットを展開 どんなアイデアでも大歓迎です。

260 html  css  iframe 

からすべてのインデントを削除したいul。私は、設定しようとしたmargin、padding、text-indentに0、しかし無駄。text-indent負の数に設定するとうまくいくようですが、それがインデントを削除する唯一の方法ですか？

260 html  css 

箇条書きの箇条書きまたは10進数がすべて上位のテキストブロックと揃っている「内部」リストが欲しいのですが。リストエントリの2行目は、1行目と同じインデントにする必要があります。 例えば： Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, 1. Text 2. Text 3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text …

260 html  css  html-lists 

フレックスボックスを使用して、ページに合わせて動的にサイズ変更される8つのアイテムを表示しています。アイテムを強制的に2行に分割するにはどうすればよいですか？（1行に4つ）？ 以下は関連する抜粋です。 （または、jsfiddleを使用する場合-http : //jsfiddle.net/vivmaha/oq6prk1p/2/ ） .parent-wrapper { height: 100%; width: 100%; border: 1px solid black; } .parent { display: flex; font-size: 0; flex-wrap: wrap; margin: -10px 0 0 -10px; } .child { display: inline-block; background: blue; margin: 10px 0 0 10px; flex-grow: 1; height: 100px; } <body> <div class="parent-wrapper"> …

260 html  css  flexbox