プログラミング css

2

親のdivを子のdivと同じ幅にしようとしています。自動幅は、親divを画面全体に合わせます。子のdivはコンテンツに応じて幅が異なるため、それに応じて親のdivを調整する必要があります。 <div style='width:auto;'> <div style="width: 135px; float: left;"> <h4 style="padding-right: 5px; padding-left: 15px;">Column1</h4> <dl style="padding-right: 5px; padding-left: 15px; margin-top: -8px; overflow-x: hidden;"> <dd style="white-space: nowrap;">1</dd> <dd style="white-space: nowrap;">2</dd> </dl> <h4 style="padding-right: 5px; padding-left: 15px;">Column1</h4> <dl style="padding-right: 5px; padding-left: 15px; margin-top: -8px; overflow-x: hidden;"> <dd style="white-space: nowrap;">1</dd> <dd style="white-space: nowrap;">2</dd> </dl> …

81 html css

5

CSS経由のUnicode：before

私が使用しています素晴らしいフォントを自分のWebページ上で、私は内側にアイコン表示したい:before疑似要素を。ドキュメント/チートシートによると、&#xf066;このフォントを取得するには入力する必要がありますが、機能していません。HTMLエンティティはでサポートされていないため、これは正常だと思います:before。そこで少しグーグルで調べたところ、HTMLエンティティをで表示:beforeする場合は、エスケープされた16進参照を使用する必要があることがわかりました。そのため、への16進参照を検索して&#xf066;いましたが、何も見つかりませんでした。それは、それが何を意味するにせよ、これらは「私的使用」の価値観だからだと思います。それを機能させる方法はあります:beforeか？

81 html css unicode encoding icons

8

CSS：中央のブロックですが、コンテンツを左に揃えます

ブロック全体をその親の中央に配置したいのですが、ブロックの内容を左揃えにしたいのです。例が最も役立ちますこのページ： http://yaml-online-parser.appspot.com/?yaml=%23+ASCII+Art%0d%0a---+%7c%0d%0a++%5c%2f%2f%7c%7c%5c% 2f％7c％7c％0d％0a ++％2f％2f +％7c％7c ++％7c％7c __％0d％0a＆type = python アスキーアートは（表示されているとおりに）中央に配置する必要がありますが、整列して「YAML」のように見える必要があります。またはこれ： http://yaml-online-parser.appspot.com/?yaml=%3f+-+Detroit+Tigers%0d%0a++-+Chicago+cubs%0d%0a%3a%0d%0a++-+2001-07-23 ％0d％0a％0d％0a％3f +％5b + New + York + Yankees％2c％0d％0a ++++ Atlanta + Braves +％5d％0d％0a％3a +％5b + 2001-07-02％2c + 2001-08-12％2c％0d％0a ++++ 2001-08-14 +％5d％0d％0a エラーメッセージは、コンソールの場合と同じようにすべて表示されます。

81 css alignment center

1

要素タイプの子ではないCSSセレクター？

タグcode内にない要素のスタイルを設定したいa。これを達成するための最良のアプローチは何ですか？ code:not(a code)少なくともChromeでは、動作するはずのように見えても、まったく動作しないようです。コンソールからも動作させることができません。これに使用できる他のCSSのみのアプローチはありますか？

81 css css-selectors

9

インライン<style>タグとインラインcssプロパティ

CSSプロパティを設定するための推奨される方法は何ですか？インラインスタイルのプロパティ： <div style="width:20px;height:20px;background-color:#ffcc00;"></div> <style>...</style>タグのスタイルプロパティ： <style>.gold{width:20px;height:20px;background-color:#ffcc00;}</style><div class="gold"></div>

81 html css

6

ページコンテンツの上にdivをフロートする

検索オプションを動的に表示するポップアップボックスを実装しました。ボックスをすべてのサイトコンテンツの上に「フロート」させたい。現在、ボックスが表示されると、その下のすべてのコンテンツが置き換えられ、見栄えが悪くなります。ボックスのdivのz-indexを残りのページコンテンツのz-indexに設定しようとしましたが、それでもうまくいきません。

81 css z-index

10

ボットからメールアドレスを隠す-mailtoを保持する：

tl; dr スクリプトを使用せずにボットからメールアドレスを非表示にし、mailto:機能を維持します。メソッドはスクリーンリーダーもサポートする必要があります。概要スクリプトやお問い合わせフォームを使用せずに難読化をメールで送信メールアドレスは、人間の視聴者に完全に表示され、機能を維持する必要がありますmailto: メールアドレスは画像形式であってはなりません。メールアドレスは、スパムクローラーやスパムボット、その他の種類のハーベスターから「完全に」隠されている必要があります望ましい効果：スクリプトはありません。プロジェクトで使用されているスクリプトはありません。そのままにしておきたいと思います。メールアドレスはページに表示されるか、モーダルを開くなどのユーザー操作の後に簡単に表示できます。ユーザーは、電子メールアドレスを上のクリックできる順番にトリガーするmailto:機能を。電子メールをクリックすると、ユーザーの電子メールアプリケーションが開きます。言い換えれば、mailto:機能が機能する必要があります。メールアドレスが表示されていないか、ボットのメールアドレスとして識別されていません（これにはページソースが含まれます）スパムでいっぱいの受信トレイがありません何をしない仕事はメールアドレスの代わりに連絡フォーム（または同様のもの）を追加するお問い合わせフォームが嫌いです。お問い合わせフォームに記入することはめったにありません。メールアドレスがない場合は電話番号を探し、電話番号がない場合は別のサービスを探し始めます。どうしても必要な場合にのみ、コンタクトフォームに記入します。住所を住所の画像に置き換えるこれは、スクリーンリーダーを使用している人に大きな不利益をもたらします（将来のプロジェクトで視覚障害者を覚えておいてください）また、画像をクリック可能にしてからリンクの機能を追加しない限り、機能が削除されmailto:ますが、それでは目的が果たせなくなり、ボットにメールが表示されるようになります。mailto:href 何がうまくいくか：賢い使い方pseudo-elementsでCSS base64エンコーディングを利用するソリューション解体ユーザーがボタンをクリックしたときに電子メールアドレスを、文書間の部分を広げることは、その後（これはおそらく複数含むことになるモーダルで一緒に戻ってそれらを置くCSSクラスとの使用をanchor tags）を介してhtml属性を変更するCSS @MortezaAsadiは、以下のコメントで可能性を優雅に提起しました。これは完全なものへのリンクです-記事は2012年のものです： CSSを使用してHTML属性を変更できるとしたらどうでしょうか。私の知識の範囲を超えている他の創造的な解決策。同様の質問/修正 JavaScript：JoeMallerによってメールアドレスを保護する（これはJoe Mallerによって提案された素晴らしい修正です。うまく機能しますが、スクリプトベースです。次のようになります。 <SCRIPT TYPE="text/javascript"> emailE = 'emailserver.com' emailE = ('yourname' + '@' + emailE) document.write('<A href="mailto:' + …

81 html css web-crawler mailto

6

CSSを使用してページの中央にテーブルを配置するにはどうすればよいですか？

私は次のコードを使用しています。CSSを使用してこのテーブルをページの中央に配置するにはどうすればよいですか？ <html> <head> <link rel="stylesheet" type="text/css" href="styles.css" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>The Main Page</title> </head> <body> <table> <tr> <td><button class="lightSquare"></button></td> <td><button class="darkSquare"></button></td> <td><button class="lightSquare"></button></td> <td><button class="darkSquare"></button></td> <td><button class="lightSquare"></button></td> <td><button class="darkSquare"></button></td> <td><button class="lightSquare"></button></td> <td><button class="darkSquare"></button></td> </tr> </table> </body> </html>

81 html css html-table center

9

CSSを使用して、divの高さを幅に比例してスケーリングできますか？

divの高さを常に幅の半分にしたいようにCSSで変数を設定できますか？divの画面サイズの幅がパーセントである場合にdivがスケーリングします <div class="ss"></div> CSS： .ss { width:30%; height: half of the width; } この30％の幅は、画面の解像度に合わせて調整されます

81 html css

12

フィールドセットの幅をその中のコントロールと同じ幅にする方法はありますか？

フィールドセットのデフォルトはコンテナの幅100％のようです。フィールドセットをフィールドセット内の最も広いコントロールと同じ大きさにする方法はありますか？

80 html css fieldset

8

css単一または複数行の垂直方向の整列

1行以上のタイトルがあります。テキストを垂直方向に揃えるにはどうすればよいですか？常に1行の場合は、行の高さをコンテナの高さに設定できます。 JavaScriptを使用してそれを行うことはできますが、私はそれがあまり好きではありません。純粋なCSSの方法を探しています。また、コンテナが線で拡張できれば完璧なので、常に上下に同じパディングを付けることができます。

80 html css

2

インラインブロックdivがラップしないようにするにはどうすればよいですか？

jsFiddleデモ私はdivsにしたい：コンテンツをラップします。基本的に折り返すことなく、元の関連付けられた行にとどまります。基本的に、テーブルが画面に表示されない場合、テーブルは互いに積み重なっています。私はむしろ彼らが画面から隠されるようになることを望みます。 overflow: hidden;メインのレイアウトスタイルに追加してみました。それぞれの幅を固定したくありませんdiv。コンテンツをに合わせる必要があります。 .layout { -moz-border-radius: 15px; border-radius: 15px; vertical-align: top; display: inline-block; } .layoutbacking { -moz-border-radius: 15px; border-radius: 15px; padding: 5px; margin: 5px; background: #CCCCCC; } <div class="layout" style="background: #222222; width: 100%"> <div> <div class="layout layoutbacking"> <table> <tr> <th>header 1</th> <th>header 2</th> <th>header 3</th> <th>header …

80 html css layout

13

CSSファイルのコンテンツをどのように整理する必要がありますか？

この質問は、実際のCSSディレクティブ自体を.cssファイル内に編成することに関するものです。新しいページまたはページのセットを開発するとき、私は通常、.cssファイルに手動でディレクティブを追加し、可能な場合はリファクタリングを試みます。しばらくすると、数百（または数千）の行ができ、レイアウトを微調整するときに必要なものを見つけるのが難しくなる可能性があります。ディレクティブを整理する方法について誰かアドバイスがありますか？ DOMを模倣して、トップダウンで整理する必要がありますか？ UIの同じ部分をサポートする要素のディレクティブをまとめて、機能的に整理する必要がありますか？すべてをセレクターでアルファベット順に並べ替える必要がありますか？これらのアプローチのいくつかの組み合わせ？また、CSSを個別のファイルに分割することをお勧めする前に、1つのファイルに保持する必要のあるCSSの量に制限はありますか？言う、1000行？それとも、すべてを1か所にまとめておくのは常に良い考えですか？関連する質問：CSSルールを整理するための最良の方法は何ですか？

80 css

7

AngularJsに隠された可視性？

<button id="tagBtnId" name="TagsFilter" ng-show="disableTagButton">Tags</button> NG-showが適用されるdisplay: noneか、display: blockプロパティしかし、私は、適用したいvisibility: hiddenとvisibility: visibleプロパティ。

80 html css angularjs

1

CSSブロックフォーマットコンテキストはどのように機能しますか？

CSSブロックフォーマットコンテキストはどのように機能しますか？ CSS2.1の仕様によると、ブロックフォーマットのコンテキストでは、ボックスは上から順に垂直に配置されます。これは、ブロックボックスが新しいブロックフォーマットコンテキストを確立した場合を除いて、途中にフロート要素がある場合でも発生します。ご存知のように、ブラウザがブロックフォーマットコンテキストでブロックボックスをレンダリングする場合、float要素は省略されますが、新しいブロックフォーマットコンテキストの確立が機能するのはなぜですか？ボックス（ブロックボックスとインラインボックス）は通常のフローでどのように配置されますか？ブロック要素がブロックボックスを生成することをどこかで読みましたが、ユーザーエージェントがボックスを描画するときにフローティング要素が無視され、コンテンツに入力するときにそれらが考慮されます。フローティング要素は他の要素のボックスの境界とオーバーラップしますが、解決策は、を使用してオーバーラップした要素の新しいブロックフォーマットコンテキストを確立することoverflow:hiddenです。「新しいブロックフォーマットコンテキストは引き続きブロックフォーマットです」ので、ボックスを描画するときに、フローティング要素も終了しないかのように扱います。それは正しいですか、それとも「新しいブロックフォーマットコンテキスト」を誤解しましたか？更新：その他の質問「列スタイルのレイアウトに役立つのはこの動作です。ただし、主な用途は、「メインコンテンツ」divでフロートを停止し、実際にフロート側の列、つまりソースコードの前半に表示されるフロートをクリアすることです。」私はその意味を理解していません、私は例を提供します、多分あなたは私を理解するでしょう。コードスニペットを表示 .content { background: #eee; color #000; border: 3px solid #444; width: 500px; height: 200px; } .float { background: rgba(0, 0, 255, 0.5); border: 1px solid #00f; width: 150px; height: 150px; float: right; } p { background: #444; color: #fff; } <div …

80 css

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

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