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

CSS(Cascading Style Sheets)は、HTML(HyperText Markup Language)、XML(Extensible Markup Language)ドキュメント、および色、レイアウト、フォントを含む(これらに限定されない)SVG要素の外観とフォーマットを記述するために使用される表現スタイルシート言語です。とアニメーション。また、画面、紙、音声、またはその他のメディアで要素をレンダリングする方法についても説明します。

17
$(window).width()はメディアクエリと同じではありません
プロジェクトでTwitter Bootstrapを使用しています。デフォルトのブートストラップスタイルだけでなく、独自のスタイルもいくつか追加しました //My styles @media (max-width: 767px) { //CSS here } また、ビューポートの幅が767px未満の場合、jQueryを使用してページ上の特定の要素の順序を変更しています。 $(document).load($(window).bind("resize", checkPosition)); function checkPosition() { if($(window).width() < 767) { $("#body-container .main-content").remove().insertBefore($("#body-container .left-sidebar")); } else { $("#body-container .main-content").remove().insertAfter($("#body-container .left-sidebar")); } } 私が抱えている問題は$(window).width()、CSSによって計算された幅とCSSによって計算された幅が同じではないように見えることです。とき$(window).width()、751のようにビューポートの幅がそれほどに16pxの異なるがあるように思わ戻っ767 CSSの計算。 これを引き起こしている原因と、私が問題を解決する方法を誰かが知っていますか?人々は、スクロールバーの幅は考慮に入れられておらず、使用$(window).innerWidth() < 751する方法が進むべき道であると示唆しています。ただし、理想的には、スクロールバーの幅を計算し、メディアクエリと一致するソリューション(たとえば、両方の条件が値767をチェックしている場合)を見つけたいと思います。確かに、すべてのブラウザのスクロールバーの幅が16pxになるわけではないのですか?


4
Twitter Bootstrap Button Text Word Wrap
私の人生では、これらのTwitterブートストラップボタンを複数行に折り返すことができず、そのように見えます。 画像を投稿できないので、これがやっています... [これはbuです] ttonテキスト のように見せたい [これは ] [ボタンのテキスト] <div class="col-lg-3"> <!-- FIRST COL --> <div class="panel panel-default"> <div class="panel-body"> <h4>Posted on</h4> <p>22nd September 2013</p> <h4>Tags</h4> <a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a> <a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;">Lorem ipsum dolor sit amet, …

7
インラインブロック要素を行の残りの部分に埋め込むにはどうすればよいですか?
そのようなことは、テーブルを使用する代わりに、CSSと2つのインラインブロック(または何でも)DIVタグを使用して可能ですか? 表のバージョンは次のとおりです(境界線が表示されるように追加されています): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head></head> <body> <table style="width:100%;"> <tr> <td style="border:1px solid black;width:100px;height:10px;"></td> <td style="border:1px solid black;height:10px;"></td> </tr> </table> </body> </html> 固定幅(パーセント幅ではない)の左側の列と、行の残りのスペースを埋めるように拡張する右側の列が生成されます。とてもシンプルに聞こえますよね?さらに、何も「フローティング」されていないため、親コンテナの高さはコンテンツの高さを含むように適切に拡張されます。 --BEGIN RANT-- 私は、固定幅のサイドカラムを持つマルチカラムレイアウトの「明確な修正」と「聖杯」の実装を見てきましたが、それらは複雑で複雑です。要素の順序を逆にしたり、パーセント幅を使用したり、フロート、負のマージンを使用したり、「左」、「右」、および「マージン」属性間の関係は複雑です。さらに、レイアウトはサブピクセルに対応しているため、ボーダー、パディング、またはマージンを1ピクセルでも追加すると、レイアウト全体が壊れ、列全体が折り返されて次の行に送られます。たとえば、4つの要素を1行に配置し、各要素の幅を25%に設定するなど、単純なことを行おうとしても、丸め誤差は問題になります。 --END RANT-- 「inline-block」と「white-space:nowrap;」を使用してみましたが、問題は、2番目の要素で行の残りのスペースを埋められないことです。幅を "width:100%-(LeftColumWidth)px"のように設定することは機能する場合がありますが、幅プロパティでの計算の実行は実際にはサポートされていません。
186 css  layout  fixed-width 


7
無効化されていない場合にのみホバーとアクティブ
ボタンのスタイルを設定するには、ホバー、アクティブ、無効を使用します。 しかし、問題は、ボタンが無効になっているときにホバーとアクティブなスタイルが引き続き適用されることです。 有効なボタンにのみホバーとアクティブを適用する方法は?
186 css 

5
フレックスボックスのアイテムを同じサイズにする方法は?
すべて同じ幅のアイテムがいくつかあるflexboxを使用したいと思います。flexboxは、スペース自体ではなく、スペースを均等に分散していることに気付きました。 例えば: .header { display: flex; } .item { flex-grow: 1; text-align: center; border: 1px solid black; } <div class="header"> <div class="item">asdfasdfasdfasdfasdfasdf</div> <div class="item">z</div> </div> コードスニペットを実行する結果を非表示スニペットを展開 最初の項目は2番目の項目よりもかなり大きいです。3アイテム、4アイテム、またはnアイテムがある場合、それらすべてを同じ行に表示し、アイテムごとに等量のスペースを確保します。 何か案は? http://codepen.io/anon/pen/gbJBqM
186 css  flexbox 


16
入力テキスト内のアイコンをクリア
(Google検索ボックスのように)入力要素自体を消去するために右側にアイコンが付いたテキスト入力要素をすばやく作成する方法はありますか? 周りを見回しましたが、入力要素の背景としてアイコンを配置する方法しか見つかりませんでした。jQueryプラグインか何か他にありますか? 次のような入力テキスト要素内にアイコンが必要です。 -------------------------------------------------- | X| --------------------------------------------------
185 javascript  jquery  html  css 

12
CSSを使用して入力ボタンの画像を変更するにはどうすればよいですか?
だから、私は画像を使って入力ボタンを作成することができます <INPUT type="image" src="/images/Btn.PNG" value=""> しかし、CSSを使用して同じ動作を取得することはできません。たとえば、私は試しました <INPUT type="image" class="myButton" value=""> 「myButton」はCSSファイルで次のように定義されています .myButton { background:url(/images/Btn.PNG) no-repeat; cursor:pointer; width: 200px; height: 100px; border: none; } それがやりたいことがすべてであれば、元のスタイルを使用できますが、ホバー時のボタンの外観を変更します(myButton:hoverクラスを使用)。ページの他の部分の背景画像用に(チェックとして)リンクをロードできたので、リンクが適切であることはわかっています。JavaScriptを使用してそれを行う方法の例をWebで見つけましたが、CSSソリューションを探しています。 違いがある場合は、Firefox 3.0.3を使用しています。

12
IEでのみスタイルを適用
これが私のCSSブロックです: .actual-form table { padding: 5px 0 15px 15px; margin: 0 0 30px 0; display: block; width: 100%; background: #f9f9f9; border-top: 1px solid #d0d0d0; border-bottom: 1px solid #d0d0d0; } IE 7、8、および9のみを「表示」したい width: 100% これを達成する最も簡単な方法は何ですか?


6
IE10でスクロールバーがコンテンツをオーバーレイしないようにするにはどうすればよいですか?
IE10では、スクロールバーは常にそこにあるとは限りません...スクロールバーが表示されるとオーバーレイとして表示されます...これはクールな機能ですが、特定のWebサイトではフルスクリーンアプリケーションであり、ロゴとメニューはその背後で失われます。 IE10: クロム: IE10でスクロールバーを常に固定する方法を知っている人はいますか? overflow-y:scrollが機能していないようです!それは私のウェブサイトにそれを永久に置きます。 ブートストラップが問題の原因である可能性がありますが、どの部分がわからないのですか?ここの例を参照してください:http : //twitter.github.io/bootstrap/


8
固定divのCSS水平方向の中央揃え?
#menu { position: fixed; width: 800px; background: rgb(255, 255, 255); /* The Fallback */ background: rgba(255, 255, 255, 0.8); margin-top: 30px; } 私はこの質問が100万回あることを知っていますが、私の問題の解決策を見つけることができません。私はdivを持っています、それは画面で修正されるべきです、ページがスクロールされたとしても、それは常に画面の中央に中央に留まるべきです! divには500px幅があり、30px上(マージン-トップ)から離れている必要があり、すべてのブラウザーサイズでページの中央の水平方向の中央に配置され、残りのページをスクロールするときに移動しないようにする必要があります。 それは可能ですか?
183 html  css  centering 

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.