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

うまく機能するBootstrap 4を使用して、この折りたたみ可能なナビゲーションバーを作成しましたが、ユーザーがリンクをクリックしたときに閉じます。これを行う方法はありますか？ありがとう htmlナビゲーションバー： <nav class="navbar navbar-toggleable-md fixed-top"> <button id="nav-btn"class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarDiv" aria-expanded="false" aria-label="Toggle navigation"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="container"> <a class="navbar-brand" href="#"><img src="Images/logo.png" width="60px"></a> <div class="collapse navbar-collapse" id="navbarDiv"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" …

107 html  css  twitter-bootstrap  bootstrap-4  twitter-bootstrap-4 

私の目標は、CSSを最後に適用するliことですが、そうではありません。 #refundReasonMenu #nav li:last-child { border-bottom: 1px solid #b5b5b5; } <div id="refundReasonMenu"> <ul id="nav"> <li><a id="abc" href="#">abcde</a></li> <li><a id="def" href="#">xyz</a></li> </ul> </div> コードスニペットを実行する結果を非表示スニペットを展開 最後の子だけを選択するにはどうすればよいですか？

106 css  css-selectors 

私は現在を使用して解決している、少し変わった問題がありtableます。以下を参照してください。基本的に、2つのdivが使用可能な幅の100％を占めるようにしたいが、必要なだけ垂直方向のスペースを占めるようにしたい（これは実際には画像から明らかではない）。図に示すように、この2つは常に高さが同じで、間に線が少しあるはずです。 （ソース：pici.se） これはtable、現在使用しているを使用して非常に簡単に実行できます。ただし、意味的にこれは実際にはテーブルではないため、解決策にあまり熱心ではありません。

106 html  css  html-table 

ロックされています。質問はトピックから外れていますが、歴史的に重要であるため、この質問とその回答はロックされています。現在、新しい回答や相互作用を受け入れていません。 CSSフレームワークの世界に出会った別のフォーラムで読書。私が特に調べてきたのはBluePrintです。私は他の誰かがCSSフレームワークに出くわしたのではないかと思っていましたが、どれが最善であり、努力する価値があるかを提案しますか？

106 css  css-frameworks 

私たちは、MS-Wordの表に行うことができますが、これまでのところ、私はのみ行うことができたように垂直方向に行くようにテキストをしようとしているTHISそれはだから箱が回転して、私は満足していないこれを... ... ISNが」実際の垂直方向のテキストを持つ方法はありますか？ デモでは回転を305度に設定するだけで、テキストが垂直になりません。270degでも、デモは回転を示すためだけに作成しました。

106 html  css  text  vertical-alignment 

CSSを使用してリストアイテムを横一列に表示するにはどうすればよいですか？ #div_top_hypers { background-color:#eeeeee; display:inline; } #ul_top_hypers { display: inline; } <div id="div_top_hypers"> <ul id="ul_top_hypers"> <li>‣ <a href="" class="a_top_hypers"> Inbox</a></li> <li>‣ <a href="" class="a_top_hypers"> Compose</a></li> <li>‣ <a href="" class="a_top_hypers"> Reports</a></li> <li>‣ <a href="" class="a_top_hypers"> Preferences</a></li> <li>‣ <a href="" class="a_top_hypers"> logout</a></li> </ul> </div> コードスニペットを実行する結果を非表示スニペットを展開

106 html  css  html-lists 

私はリストを持っており、liはを持っていfloat:left;ます。後のコンテンツは<ul>正しく配置されている必要があります。したがって、私は以下を構築できます： http://jsfiddle.net/8unU8/ <div class="clear">：afterのような疑似セレクターを使用して、を削除できると思いました。 しかし、例は機能していません： http://jsfiddle.net/EyNnk/ フローティング要素をクリアするには、常に別のdivを作成する必要がありますか？

106 html  css 

次の図のようなテキストブロックをデザインします。 これが可能かどうか質問しますか？

106 html  css 

Chromeのデベロッパーツールを使用して、サイトでツールチップがどのように構成されているかを確認しようとしています。ただし、アイテムにカーソルを合わせても、「要素を検査」しても、htmlのツールチップには何も表示されません。私はスタイルを次のように設定できることを知っています:hoverにいますが、それでもツールチップのhtmlまたはcssが表示されません。 何か案は？

106 html  css  hover  google-chrome-devtools 

私はこれに少し立ち往生していて、これとposition: stickyフレックスボックスの落とし穴を共有したいと思いました： ビューをフレックスボックスコンテナに切り替えるまで、スティッキーdivは正常に機能していましたが、フレックスボックスの親にラップされたときに突然divがスティッキーではなくなりました。 .flexbox-wrapper { display: flex; height: 600px; } .regular { background-color: blue; } .sticky { position: -webkit-sticky; position: sticky; top: 0; background-color: red; } <div class="flexbox-wrapper"> <div class="regular"> This is the regular box </div> <div class="sticky"> This is the sticky box </div> </div> コードスニペットを実行する結果を非表示スニペットを展開 問題を示すJSFiddle

106 css  flexbox  css-position  sticky 

開発サイトにfancybox2を実装しました。 ファンシーボックスをエンゲージすると（リンクをクリックするなど）、HTML全体がその後ろに移動し、先頭に移動します。別のデモでも問題なく機能していますが、同じコードをこのプロジェクトにドラッグすると、先頭にジャンプします。インラインdivへのリンクだけでなく、単純な画像ギャラリーにも使用できます。 誰かこれを経験しましたか？

105 jquery  css  fancybox-2 

'mapwrap' divを400px x 400pxに設定し、その中にGoogle 'map'を100％x 100％に設定しています。したがって、地図は400 x 400pxで読み込まれ、JavaScriptを使用して「mapwrap」のサイズを画面の100％x 100％に変更します。Googleマップは予想どおり画面全体にサイズ変更されますが、タイルはページ。 Googleマップを大きなサイズの「mapwrap」divに再調整するために呼び出すことができる単純な関数はありますか？

105 javascript  css  google-maps 

CSSを使用して、タイプに基づいてすべての入力をターゲットにする方法はありますか？さまざまな無効なフォーム要素で使用する無効なクラスがあり、テキストボックスの背景色を設定していますが、チェックボックスでその色を取得したくありません。 別のクラスでこれを実行できることはわかっていますが、可能であればCSSを使用します。きっとJavaScriptでこれを設定できますが、再びCSSを探します。 IE7 +をターゲットにしています。だから私はCSS3を使うことができないと思います。 編集する CSS3を使用すると、次のようなことができますか？ INPUT[type='text']:disabled それは私のクラスを完全に取り除くのにさらに良いでしょう... 編集する 助けてくれてありがとう！したがって、クラスを設定する必要なしに無効にされたすべてのテキストボックスと領域を変更するセレクターがあります。この質問を始めたとき、これが可能だとは思っていませんでした... INPUT[disabled][type='text'], TEXTAREA[disabled] { background-color: Silver; } これはIE7で動作します

105 css  internet-explorer  css-selectors 

HTMLテーブルの行を非表示にして、<tr>スペースを取らないようにするにはどうすればよいですか？にいくつか<tr>のを設定しstyle="display:none;"ていますが、それでもテーブルのサイズに影響し、テーブルの境界線は非表示の行を反映しています。

105 html  css  html-table 

JavaScriptでインラインCSS値を設定するのは簡単です。幅を変更したい場合、次のようなhtmlがあります。 <div style="width: 10px"></div> 私がする必要があるのは： document.getElementById('id').style.width = value; インラインスタイルシートの値が変更されます。インラインスタイルがスタイルシートをオーバーライドするため、通常これは問題ではありません。例： <style> #tId { width: 50%; } </style> <div id="tId"></div> このJavascriptを使用する： document.getElementById('tId').style.width = "30%"; 私は以下を得ます： <style> #tId { width: 50%; } </style> <div id="tId" style="width: 30%";></div> これは問題です。インライン値を変更したくないだけでなく、設定する前に幅を探した場合、 <div id="tId"></div> 返される値はNullであるため、ロジックを実行するために何かの幅を知る必要があるJavascriptがある場合（幅を特定の値ではなく1％増やします）、文字列 "50％を期待するときにNullを返します「実際には機能しません。 だから私の質問：インラインに配置されていないCSSスタイルの値があります。これらの値を取得するにはどうすればよいですか？IDを指定して、インライン値の代わりにスタイルを変更するにはどうすればよいですか？

105 javascript  html  css  ajax  dom