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

またはで、弾丸がどれだけの水平方向のスペースを<li>右に押すかを制御したいと思います。<ol><ul> つまり、常に持っている代わりに * Some list text goes here. それを変えられるようにしたい * Some list text goes here. または *Some list text goes here. 見回したが、ブロック全体を左または右にシフトするための指示しか見つかりませんでした。たとえば、http：//www.alistapart.com/articles/taminglists/

177 html  css  html-lists 

私はdivを持っていますが、水平方向に中央揃えにしたいのですが、中央揃えではありmargin:0 auto;ません... .container { position: absolute; top: 15px; z-index: 2; width:40%; max-width: 960px; min-width: 600px; height: 60px; overflow: hidden; background: #fff; margin:0 auto; }

177 css  html  center  absolute 

CSSのみを使用してスライドイン遷移を生成するJavaScriptなしのクロスブラウザーソリューションはありますか？以下は、htmlコンテンツの例です。 <div> <img id="slide" src="http://.../img.jpg /> </div>

177 css  css-transitions 

スクロールした後、ナビゲーションバーを一番上に固定したいのですが、うまくいきません。理由がわかりません。あなたが助けてくれるなら、これが私のHTMLとCSSコードです： .nav-selections { text-transform: uppercase; letter-spacing: 5px; font: 18px "lato",sans-serif; display: inline-block; text-decoration: none; color: white; padding: 18px; float: right; margin-left: 50px; transition: 1.5s; } .nav-selections:hover{ transition: 1.5s; color: black; } ul { background-color: #B79b58; overflow: auto; } li { list-style-type: none; } <nav style="position: sticky; position: -webkit-sticky;"> <ul align="left"> …

177 html  css  css-position 

私が使用しています反応するアプリを作成し、したくありませんeject。 @ font-faceを介してインポートされ、ローカルにロードされたフォントをどこに置くべきか明確ではありません。 つまり、ロードしています @font-face { font-family: 'Myriad Pro Regular'; font-style: normal; font-weight: normal; src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff'); } 助言がありますか？ -編集 ダンが回答に言及した要点を含める ➜ Client git:(feature/trivia-game-ui-2) ✗ ls -l public/static/fonts total 1168 -rwxr-xr-x@ 1 maximveksler staff 62676 Mar 17 2014 MYRIADPRO-BOLD.woff -rwxr-xr-x@ 1 maximveksler staff 61500 Mar 17 2014 …

177 css  reactjs  fonts  webpack  create-react-app 

私はこの会社の新人であり、CSSのマイルを使用する製品を持っています。アプリの印刷可能なスタイルシートを作成しようとしていますが、background-colorで問題が発生してい@media printます。 @media print { #header{display:none;} #adwrapper{display:none;} td { border-bottom: solid; border-right: solid; background-color: #c0c0c0; } } それ以外はすべて機能します。境界線などを変更できますがbackground-color、印刷には反映されません。これで、詳細がわからないと、質問に答えられない可能性があることを理解しています。誰かが以前にこの問題または同様の問題を抱えていたのかどうか知りたかっただけです。

176 css  media-queries 

<td class="style1" align='center' height='35'> <div style='overflow: hidden; width: 230px;'> <a class='link' herf='' onclick='topic(<?=$key;?>)'> <span id='name<?=$key;?>'><?=$name;?></span> </a> </div> </td> これは私のCSSスクリプトです .style1 { background-image: url('http://localhost/msite/images/12.PNG'); background-repeat: no-repeat; background-position: left center; } 細胞background-image全体を伸ばしたい<td>

176 html  css  background 

私は現在、CSSスタイルを適用するHTMLを制御できないプロジェクトに取り組んでいます。そして、要素を区別するのに十分なidとクラスの宣言がないという意味で、HTMLは十分にラベル付けされていません。 だから、私はidまたはclass属性を持たないオブジェクトにスタイルを適用する方法を探しています。 フォーム項目に「名前」または「値」属性がある場合があります。 <input type="submit" value="Go" name="goButton"> name = "goButton"に基づいてスタイルを適用する方法はありますか？「価値」についてはどうですか？ Googleの検索では、「名前」や「値」などの一般的な用語がウェブページに表示されるあらゆる種類のインスタンスを見つけるため、これを見つけるのは難しい種類のことです。 私は答えがノーだと疑っています...しかし、おそらく誰かが巧妙なハックをしていますか？ どんなアドバイスもいただければ幸いです。

176 html  css  css-selectors 

次のスニペットを考えてみましょう： .parent { display: flex; flex-direction: column; width: 400px; border: 1px solid red; align-items: center; } .child { border: 1px solid blue; } <div class="parent"> <div class="child"> Lorem Ipsum is simply dummy text of the printing and typesetting industry </div> <div class="child"> Lorem Ipsum is simply dummy text of the …

176 css  internet-explorer  flexbox  internet-explorer-11 

<div>CSSで高さを特定のパーセンテージに設定しようとしていますが、その中のコンテンツと同じサイズのままです。<!DOCTYTPE html>ただし、HTML 5を削除すると機能し、<div>必要に応じてページ全体が使用されます。ページを検証したいのですが、どうすればよいですか？ このCSSは<div>にあり、IDはpage次のとおりです。 #page { padding: 10px; background-color: white; height: 90% !important; }

176 html  css  height 

ページにブロック要素のコレクションがあります。CSSルールの空白、オーバーフロー、テキストオーバーフローがすべて設定されているため、オーバーフローしたテキストは削除され、省略記号が使用されます。 ただし、すべての要素がオーバーフローするわけではありません。 とにかく、どの要素がオーバーフローしているかを検出するためにJavaScriptを使用できますか？ ありがとう。 追加：使用しているHTML構造の例。 <td><span>Normal text</span></td> <td><span>Long text that will be trimmed text</span></td> SPAN要素は常にセルに収まり、省略記号ルールが適用されます。省略記号がSPANのテキストコンテンツにいつ適用されるかを検出したいと思います。

176 javascript  html  css  ellipsis 

私は、結合したい:afterと:hoverCSS（または任意の他の疑似セレクタ）で。基本的にはリストがあり、selectedクラスを持つアイテムにはを使用して適用される矢印の形があり:afterます。ホバーされているオブジェクトでも同じようにしたいのですが、うまく動かせません。コードはこちら #alertlist { list-style:none; width: 250px; } #alertlist li { padding: 5px 10px; border-bottom: 1px solid #e9e9e9; position:relative; } #alertlist li.selected, #alertlist li:hover { color: #f0f0f0; background-color: #303030; } #alertlist li.selected:after { position:absolute; top: 0; right:-10px; bottom:0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #303030; content: …

176 css  css-selectors  pseudo-element 

これは簡単なはずですが、検索キーワードを見つけるのに苦労しています。 私がこれを持っているとしましょう： <div class="a c">Foo</div> <div class="b c">Bar</div> CSSでは、「（。aまたは.b）および.c」に一致するセレクターをどのように作成できますか？ 私はこれができると知っています： .a.c,.b.c { /* CSS stuff */ } しかし、私がこの種のロジックをさまざまな論理的な組み合わせで何度も実行する必要があると仮定すると、より良い構文はありますか？

176 html  css  css-selectors 

CSSルールを、クラスの1つが指定されたプレフィックスと一致するすべての要素に適用したい。 たとえばstatus-、次のスニペットでは、（AとCで始まるが、Bではない）クラスを持つdivに適用されるルールが必要です。 <div id='A' class='foo-class status-important bar-class'></div> <div id='B' class='foo-class bar-class'></div> <div id='C' class='foo-class status-low-priority bar-class'></div> ある種の組み合わせ： div[class|=status]とdiv[class~=status-] CSS 2.1で実行できますか？CSS仕様で実行できますか？ 注：私は、jQueryを使用してそれをエミュレートできることを知っています。

175 css  css-selectors 

多くの人々はまだコントロールやデータなどをレイアウトするためにテーブルを使用しています-これの一例は人気のあるjqGridです。しかし、私には理解できないようないくつかの魔法が起こっています（大声で叫ぶためのテーブル、どれほどの魔法が存在する可能性があるのでしょうか？） どのようにしてテーブルの列幅を設定し、jqGridのようにすることができますか？これを複製しようとすると<td style='width: 20px'>、をすべて設定しても、これらのセルのいずれかのコンテンツが20pxを超えるとすぐに、セルが拡大します。 アイデアや洞察はありますか？

175 html  css  layout  html-table