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

フレックスアイテムを中央に配置したいのですが、2行目がある場合は、1の下に5（下の画像から）を配置し、親の中央には配置しません。 これが私が持っているものの例です： ul { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; } li { list-style-type: none; border: 1px solid gray; margin: 15px; padding: 5px; width: 200px; } <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> コードスニペットを実行するHide resultsスニペットを展開 http://jsfiddle.net/8jqbjese/2/

92 html  css  flexbox 

ご覧のとおりlist-items、最初のrowは同じheightです。しかし、2番目のアイテムrowは異なりheightsます。すべてのアイテムにユニフォームを付けてほしいheight。 固定の高さを与えずにフレックスボックスのみを使用してこれを達成する方法はありますか？ これが私の code .list { display: flex; flex-wrap: wrap; max-width: 500px; } .list-item { background-color: #ccc; display: flex; padding: 0.5em; width: 25%; margin-right: 1%; margin-bottom: 20px; } .list-content { width: 100%; } <ul class="list"> <li class="list-item"> <div class="list-content"> <h2>box 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> …

92 html  css  flexbox 

ウェブサイト全体で「アルジェリア」という名前の単一のフォントを使用したい。したがって、すべてのHTMLタグを変更する必要があり、次のように異なるタグに異なるコードを記述したくありません。 button{font-family:Algerian;} div{font-family:Algerian;} 以下に書かれた方法も非常に推奨されていません： div,button,span,strong{font-family:Algerian;}

91 html  css  fonts  font-face 

マウスオーバーでdivの背景色を変更しようとしています。 div {background：white;} div a：hover {background：grey; 幅：100％; 表示ブロック; text-decoration：none;} div内のリンクのみが背景色を取得します。 div全体にその背景色を付けるにはどうすればよいですか？ ありがとうございました 編集： div全体をリンクとして機能させるにはどうすればよいですか？そのdivのどこかをクリックすると、アドレスに移動します

91 css  colors  background  hover 

私は現在、このコードを使用してリストをレンダリングしています： <ul ng-cloak> <div ng-repeat="n in list"> <li><a href="{{ n[1] }}">{{ n[0] }}</a></li> <li class="divider"></i> </div> <li>Additional item</li> </ul> ただし、<div>一部のブラウザでは、この要素が原因で非常に小さなレンダリングの欠陥が発生しています。divコンテナーなしでng-repeatを実行する方法、または同じ効果を達成するためのいくつかの代替方法があることを知りたいです。

91 javascript  css  html  angularjs 

css3アニメーションの場合にコールバック関数を実装する方法はありますか？JavaScriptアニメーションの場合は可能ですが、css3でそれを行う方法が見つかりません。 私が見ることができる1つの方法は、アニメーション期間の後にコールバックを実行することですが、アニメーションが終了した直後に必ず呼び出されるとは限りません。ブラウザのUIキューによって異なります。より堅牢な方法が必要です。どんな手掛かり？

91 javascript  css  frontend 

翌日、クライアントの1人にWebアプリのプロトタイプを提示する必要があります。CSSがあまり得意ではなく、最悪の場合、得られる結果にほとんど満足できません。 ビジネスロジックをコーディングしても問題はありませんが、UIの設計には80％以上の時間がかかります。私は息をのむようなことを何も必要とせず、ただクリーンで素晴らしくて見栄えの良い環境、例えば： これは私が繰り返し経験している問題です。WebUIの開発で、デフォルトのスタイルがよりシンプルになり、Visual StudioまたはiPhone SDKと同様のアプローチが私にとって非常に役立つと思います。 上記のBalsamiq Mockupsで作成されたモックアップは良い例であり、最も一般的な「コンポーネント」はすべて使用でき、何よりも、見栄えの良いスタイルが1つだけ選択できます。 Webにこのようなものはありますか？中立ながらも素晴らしいCSSまたはJavaScript UIフレームワーク？ これまでのオプション： ブートストラップ Qooxdoo jQuery UI jQueryツール MochaUI Ext JS Yahoo! ユーザーインターフェイスライブラリ BlueTrip BluePrint 浮（デモ） ナッピー YAML ベースライン iPlotz スプラウトコア ForeUI CSSのみのUIフレームワークがあるかどうか知りたいです。 私はこのページにWeb UIライブラリの非常に優れたリストを見つけましたが、それらのほとんど（少なくとも優れたもの）はJavaに固有であるようです。純粋なCSSまたはJSに同等に優れた代替品はありますか？ PS：私はAJAX、エフェクト、ビヘイビアーなどには興味がありません...私の（唯一の）懸念はスタイルです。 みんなのすべての提案をありがとう！ 提案されたすべてのUIライブラリを非常に慎重に検討した結果、ExtJSとQooxdooが私のニーズに最も近いものであるという結論に達しました。jQuery UIは有望であるように見えますが、提供される要素の数は少なくなっています。 CSSのみのライブラリーに関する限り、私はBlueTrip / BluePrintと、タンブラーによって提案されたテーマが最高であることを発見しました。それとは別に、FlexとNapkeeも探索する価値があるようです。 今ExtJSを学ぶ時が来ました！=）

91 css  user-interface 

Webkitの移行終了イベントはwebkitTransitionEndと呼ばれ、FirefoxはtransitionEnd、オペラはoTransitionEndです。純粋なJSでそれらすべてに取り組む良い方法は何ですか？ブラウザをスニッフィングする必要がありますか？またはそれぞれを個別に実装しますか？私には思いつかなかった他の方法がありますか？ つまり： //doing browser sniffing var transitionend = (isSafari) ? "webkitTransitionEnd" : (isFirefox) ? "transitionEnd" : (isOpera) ? "oTransitionEnd"; element.addEventListener(transitionend, function(){ //do whatever },false); または // Assigning an event listener per browser element.addEventListener("webkitTransitionEnd", fn); element.addEventListener("oTransitionEnd", fn); element.addEventListener("transitionEnd", fn); function fn() { //do whatever }

91 javascript  css  css-transitions  dom-events 

これら2つの違いを完全に理解しているかどうかはわかりません。 誰かがなぜ私が他のものを使用するのか、そしてそれらがどのように異なるのか説明できますか？

91 css  css-position 

この質問がすでに回答されている場合は、お詫び申し上げます。解決策を探してみましたが、自分のコードに適したものは見つかりませんでした。私はまだjQueryを初めて使用します。 2つの異なるページに2種類のスティッキーメニューがあります。これが両方のコードです。 $(document).ready(function () { var contentNav = $('.content-nav').offset().top; var stickyNav = function () { var scrollTop = $(window).scrollTop(); if (scrollTop > contentNav) { $('.content-nav').addClass('content-nav-sticky'); } else {; $('.content-nav').removeClass('content-nav-sticky') } }; stickyNav(); $(window).scroll(function () { stickyNav(); }); }); $(document).ready(function () { var stickyNavTop = $('.nav-map').offset().top; // var contentNav = $('.content-nav').offset().top; …

91 javascript  jquery  html  css  dom 

画像ファイルが見つからないときに、レンダリングされたHTMLページから従来の「画像が見つかりません」アイコンを非表示にする方法を知っていますか？ JavaScript / jQuery / CSSを使用する作業方法はありますか？

91 javascript  jquery  html  css  image 

ここに私は フィドルがあります ul { display: flex; justify-content: flex-start; flex-direction: row; align-items: center; width: 100%; height: 100px; background: #333; padding: 15px; } ul li { padding: 15px; margin: 5px; background: #efefef; border: 1px solid #ccc; display: inline-block; list-style: none; } #item-1 { height: 50px; } #item-2 { height: 70px; } <ul> …

91 html  css 

：after疑似要素を使用してかなり複雑なDOM要素をいくつか作成しました。それらをChrome InspectorまたはFirebugまたは同等のもので検査および調整できるようにしたいと考えています。 この機能については、このWebKit / Safariブログ投稿（2010年日付）で言及されていますが、ChromeとSafariのどちらにもこの機能はありません。Chromeには、少なくとも：hover、：visited、および：activeの状態を検査するチェックボックスがありますが、：beforeおよび：afterは表示されません。 さらに、このブログ投稿（2009年日付）では、この機能がIE開発ツールに存在することについて言及していますが、現在Mac OSを使用しているため、これは役に立ちません。さらに、IEは私が主に対象としているブラウザーではありません。 これらの疑似要素を検査する方法はありますか？ 編集：Firebugがこれらの要素を検査できないことについて間違っていることに加えて、Operaはすぐに：beforeおよび：after要素を検査するのにかなり優れていることがわかりました。

91 css  firefox  google-chrome  firebug  google-chrome-devtools 

font-awesomeアイコンを静的に45度回転させたいのですが。それはサイトで言う： アイコンを任意に回転および反転するには、fa-rotate- *およびfa-flip- *クラスを使用します。 ただし、 <i class="fa fa-link fa-rotate-45" style="font-size:1.5em"></i> は機能しませんが、で置き換えるfa-rotate-45とfa-rotate-90機能します。これは実際には任意に回転できないことを意味しますか？

91 css  rotation  font-awesome 

スタイルの要素があります position: relative; transition: all 2s ease 0s; 次に、クリックした後にスムーズに位置を変更したいのですが、スタイル変更を追加すると、トランジションが発生せず、代わりに要素が即座に移動します。 $$('.omre')[0].on('click',function(){ $$(this).style({top:'200px'}); }); ただしcolor、たとえばプロパティを変更すると、スムーズに変更されます。 $$('.omre')[0].on('click',function(){ $$(this).style({color:'red'}); }); これの原因は何でしょうか？「過渡的」ではないプロパティはありますか？ 編集：私はこれがjQueryではなく、それが別のライブラリであることを述べるべきだったと思います。コードは意図したとおりに機能しているようですが、スタイルが追加されていますが、移行は2番目のケースでのみ機能しますか？

91 javascript  css  transition