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

私は固定で、コンテナのdiv持っているwidthとheight、とをoverflow: hidden。 floatの水平方向の行が必要です：このコンテナー内の左のdiv。左にフロートしているDivは、親の右の境界を読み取った後、自然に下の「行」にプッシュします。これはheight、親のがこれを許可しない場合でも発生します。これはどのように見えるかです： ！[間違った] [1]-広告に置き換えられたイメージシャックイメージを削除しました どのように見せたいですか： ！[右] [2]-広告に置き換えられたイメージシャックイメージを削除しました 注：必要な効果は、インライン要素＆を使用することで実現できますwhite-space: no-wrap（これが、表示されている画像での方法です）。ただし、子divはフロートされたブロックレベルの要素である必要があるため、これは私には良くありません（理由が長すぎてここで説明できません）。

84 html  css  alignment 

クローズ。この質問は意見に基づいています。現在、回答を受け付けていません。 この質問を改善したいですか？この投稿を編集して、事実と引用で回答できるように質問を更新してください。 1年前に閉鎖。 この質問を改善する CSS element：hoverまたはJavaScript onmouseoverのどちらを使用して、ページ上のhtml要素の外観を制御するかを選択できる場合があります。divが入力をラップする次のシナリオを考えてみましょう <div> <input id="input"> </div> マウスカーソルをdivの上に置いたときに、入力の背景色を変更したい。CSSのアプローチは <style> input {background-color:White;} div:hover input {background-color:Blue;} </style> <div><input></div> JavaScriptのアプローチは <div onmouseover="document.getElementById('input').style.backgroundColor='Blue';"> <input id="input"> </div> 各アプローチの長所と短所は何ですか？CSSアプローチはほとんどのWebブラウザでうまく機能しますか？JavaScriptはcssより遅いですか？

84 javascript  css 

ブートストラップをダウンロードしたときにブートストラップファイルにあるbootstrap.cssとbootstrap-theme.cssの違いは何ですか？

84 css  twitter-bootstrap-3 

aナビゲーションの要素の高さと幅を設定できません。 #header div#snav div a{ width:150px; height:77px; } #header div#snav div a:link{ width:150px; height:77px; } #header div#snav div a:hover{ height:77px; background:#eff1de; } 私が間違っていることについて何か考えはありますか？

84 html  css 

ウェブサイトのソースでは、開発者がremユニットを使用しているのを時々見ました。似ていemますか？私はそれが実際に何をするのかを見るためにそれを試しました、しかしそれは何に関連していますか？ デモ HTML <div>Hello <p>World</p></div> CSS div { font-size: 1.4rem; } div p { font-size: 1.4rem; }

84 css 

だから私はこのJavaScriptを実行していて、背景画像へのパスを除いてすべてが正常に機能します。ローカルのASP.NETDev環境では機能しますが、仮想ディレクトリ内のサーバーに展開した場合は機能しません。 これは外部の.jsファイルにあり、フォルダー構造は Site/Content/style.css Site/Scripts/myjsfile.js Site/Images/filters_expand.jpg Site/Images/filters_colapse.jpg 次に、これはjsファイルが含まれている場所です Site/Views/ProductList/Index.aspx $("#toggle").click(function() { if (left.width() > 0) { AnimateNav(left, right, 0); $(this).css("background", "url('../Images/filters_expand.jpg')"); } else { AnimateNav(left, right, 170); $(this).css("background", "url('../Images/filters_collapse.jpg')"); } }); 使ってみましたが、うまくいき'/Images/filters_collapse.jpg'ません。ただし、を使用するとサーバー上で動作するよう'../../Images/filters_collapse.jpg'です。 基本的に、ASP.NETtildaと同じ機能が必要です- ~。 更新 外部.jsファイル内のパスは、それらが含まれているページに関連していますか、それとも.jsファイルの実際の場所ですか？

84 javascript  html  asp.net-mvc  css  path 

どうやら、テキストの段落が特定の長さに達すると、Android上のGoogle Chromeは、テキストのサイズを変更して大きくすることを決定します（あらゆる種類の楽しみを引き起こします）。これで、pタグの約半分が設定したサイズに従い、残りの半分が段落の長さに応じて自由に変更されるWebサイトができました。 一体どうやってこれを修正するのですか？

84 android  html  css  google-chrome  font-size 

私は流動的なウェブサイトを持っていて、メニューはその幅の20％です。メニューのフォントサイズを適切に測定して、常にボックスの幅に合わせ、次の行に折り返さないようにします。「em」を単位として使用することを考えていましたが、これはブラウザのフォントサイズに関連しているため、解像度を変更してもフォントサイズは同じままです。 ptsとパーセンテージも試してみました。必要なものは何も機能しません... 進め方のヒントを教えてください。

84 css  measurement 

2つの積み重ねられた半透明のボックスの最終的な色が順序に依存するのはなぜですか？ どちらの場合も同じ色になるようにするにはどうすればよいですか？ .a { background-color: rgba(255, 0, 0, 0.5) } .b { background-color: rgba(0, 0, 255, 0.5) } <span class="a"><span class="b"> Color 1</span></span> <span class="b"><span class="a">Different Color 2</span></span> コードスニペットを実行する結果を非表示スニペットを展開

84 html  css  background  background-color  overlapping 

純粋なcssで、つまりhtmlタグを追加せずに、次のように改行することは可能<br>ですか？<h4>要素の後に改行したいが、前にはしたくない： HTML <li> Text, text, text, text, text. <h4>Sub header</h4> Text, text, text, text, text. </li> CSS h4 { display: inline; } 私はこのような質問をたくさん見つけましたが、常に「display：block;を使用してください」のような答えがあります。、<h4>同じ行に留まらなければならないとき、私はできません。

84 html  css  styling 

同じ行に2つの要素があり、左に浮いていて、右に浮いています。 <style type="text/css"> #element1 {float:left;} #element2 {float:right;} </style> <div id="element1"> element 1 markup </div> <div id="element2"> element 2 markup </div> element2をelement1の隣に並べ、2つの間に約10ピクセルのパディングを配置する必要があります。問題は、element2の幅がコンテンツやブラウザ（フォントサイズなど）によって変わる可能性があるため、必ずしもelement1と完全に一致するとは限らないことです（マージンを右に適用して移動することはできません）。 マークアップも変更できません。 それらを並べる統一された方法はありますか？パーセンテージでmargin-rightを試し、element1で負のマージンを試し、element2を近づけました（ただし、機能させることができませんでした）。

84 html  css  css-float  margin 

私は6つのステップに分割した長いフォームを持っています。フォームが読み込まれると、すべてのステップが読み込まれますが、最初のステップのみが表示されます。残りはCSSをdisplay:none持っているので、非表示になっています。ステップが完了し、Javascriptで検証されるdisplay:noneと、現在のステップがに設定され、新しいステップがに設定されdisplay:blockます。最後のステップで、ユーザーはフォームを送信します。ただし、予想どおり、display:blockページの要素のフィールドのみが送信されます。の要素で完了したフィールドはすべてdisplay:none無視されます。 display:none要素内のフィールドを送信する方法はありますか？ そうでない場合、同じ効果を達成する別の方法はありますか？

84 javascript  css  forms 

違いは何であるvisibility:collapseとはdisplay:none？

84 html  css 

私はこのコードを持っています： <select> <option value="c">Klassen</option> <option value="t">Docenten</option> <option value="r">Lokalen</option> <option value="s">Leerlingen</option> </select> iPhoneのフルスクリーンWebアプリで実行します。 このリストから何かを選択すると、iPhoneは-select要素にズームインします。そして、何かを選択した後、ズームアウトしません。 どうすればこれを防ぐことができますか？またはズームアウトしますか？

84 javascript  css  html  iphone-web-app 

好奇心から、以下の例を考慮すると、＃container divにマージンがあると、ブラウザーに垂直スクロールバーが表示されるのはなぜですか？コンテナの高さは、100％に設定されている本体の高さよりもはるかに小さくなっています。 #containerを除くすべての要素のパディングとマージンを0に設定しました。#containerdivの絶対位置を意図的に省略していることに注意してください。この場合、ブラウザは体の高さをどのように計算し、マージンはそれにどのように影響しますか？ <!DOCTYPE html> <html> <head> <style type="text/css"> * { padding:0; margin:0;} html, body { height:100%; } #container { padding:10px; margin:50px; border:1px solid black; width: 200px; height: 100px; } </style> </head> <body> <div id='container'> </div> </body> </html> JSFiddleの例

84 html  css