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

入力からテーブルセルへのCSSプロパティを検査しようとしています。入力を調べようとすると、クリックするとフォーカスが失われ、フォーカスが失われると入力が消えます。別のウィンドウ（インスペクター）に移動しているときにフォーカスを失わないようにするにはどうすればよいですか？

137 html  css  dom 

どこかをクリックすると、境界線が消え、onfocus noneを試しましたが、助けにはなりませんでした。クリックしたときに醜いボタンの境界線を消すにはどうすればよいですか。 input[type="button"] { width: 120px; height: 60px; margin-left: 35px; display: block; background-color: gray; color: white; border: none; } <input type="button" value="Example Button"> コードスニペットを実行する結果を非表示スニペットを展開

137 css  button 

CSSが提供する理由は誰でも知っています colorがテキストをていますが、持っていませんfont-colorかtext-color？ 非常に直感に反するようです text-decoration: underlineで、font-styleフォントに関連するものではなく、 W3CがこのようにさまざまなCSS名を作成した理由/方法を知っている人はいますか？

136 css 

私は新しいTwitter Bootstrap 3を使用しており、次のような検索ボックスを上部のナビゲーションバーに配置しようとしています。 Bootstrap 2では、次のようにすることができます。 <form class="form-search" method="get" id="s" action="/"> <div class="input-append"> <input type="text" class="input-medium search-query" name="s" placeholder="Search" value=""> <button type="submit" class="add-on"><i class="icon-search"></i></button> </div> </form> しかし、Bootstrap 3でこれをどのように作成するかは、変更が多いためわかりません。 Bootstrap 3のナビゲーションバーの検索ボックスフォームのデフォルトのHTMLは次のとおりです。 <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> どうすれば修正して必要なものを達成できますか？

136 css  html  twitter-bootstrap  twitter-bootstrap-3 

ユーザー名入力フィールドにユーザーアイコンを挿入しようとしています。 Font Awesomeはフォントなので 、プロパティが機能しないことを知っている同様の質問からの解決策の1つを試しました。background-image 以下は私のアプローチであり、アイコンが表示されません。 .wrapper input[type="text"] { position: relative; } .wrapper input[type="text"]:before { font-family: 'FontAwesome'; position: absolute; top: 0px; left: -5px; content: "\f007"; } デフォルトのフォントawesome cssでフォントフェースを宣言しているため、上記のfont-familyを追加するのが適切な方法であるかどうかは不明でした。 @font-face { font-family: 'FontAwesome'; src: url('../Font/fontawesome-webfont.eot?v=3.2.1'); src: url('../Font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../Font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../Font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../Font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg'); }

136 html  css  fonts  font-awesome 

不明な幅と高さを取るインラインブロックを作成したいと思います。（その中に動的に生成されたコンテンツを含むテーブルがあります）。さらに、インラインブロックは、「my text（BLOCK HERE）」などのテキスト行内に配置する必要があります。見栄えをよくするために、ブロックを行の垂直方向の中央に配置しようとしています。したがって、ブロックが次のようになっている場合： TOP MIDDLE BOTTOM 次に、テキスト行は「My text（[MIDDLE]）」（行の上下にTOPとBOTTOMがある）になります。 これが私が今まで持っているものです。 CSS .example { background-color: #0A0; display: inline-block; margin: 2px; padding: 2px; position: relative; text-align: center; } HTML <div class="example">TOP<br />MIDDLE<br />BOTTOM</div>

136 html  vertical-alignment  css 

背景画像をdivの中央に配置することはできますか？私はほぼすべてを試しましたが、成功しませんでした： <div id="doit"> Lorem Ipsum ... </div> //CSS #doit { background-image: url(images/pic.png); background-repeat: none; text-align: center; } これは可能ですか？

136 html  css  image  background  center 

私は48x48のdivを持っていて、その中にimg要素があります。部分を失うことなくそれをdivに合わせたいのですが、その間に比率が維持されますが、htmlとcssを使用して達成できますか？

136 html  css 

<td>要素に追加されたテキストをラップしたい。で試しましたstyle="word-wrap: break-word;" width="15%"。しかし、それはテキストを折り返していません。100％の幅を与えることは必須ですか？表示する他のコントロールがあるため、15％の幅しか使用できません。

136 html  css  html-table  word-wrap 

ウェブサイトに利用規約を表示したい。テキストフィールドを使用したくないし、ページ全体を使用したくない。選択した領域にテキストを表示し、垂直スクロールバーのみを使用して、すべてのテキストを読み上げたいのですが。 現在、私はこのコードを使用しています： <div style="width:10;height:10;overflow:scroll" > text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text …

136 css  html  overflow 

クラスのスタイルをtdタグの1レベルのみに適用する方法はありますか？ <style>.MyClass td {border: solid 1px red;}</style> <table class="MyClass"> <tr> <td> THIS SHOULD HAVE RED BORDERS </td> <td> THIS SHOULD HAVE RED BORDERS <table><tr><td>THIS SHOULD NOT HAVE ANY</td></tr></table> </td> </tr> </table>

136 css  css-selectors 

入力の隣にラベルを正しく配置する必要があるフォームの非常に基本的で既知のシナリオがあります。しかし、私はそれを行う方法がわかりません。 私の目標は、ラベルが入力の右側に配置されることです。これが望ましい結果の画像例です。 私はあなたの便宜のためにそして私が今持っているものを明確にするためにフィドルを作りました-http ://jsfiddle.net/WX58z/ スニペット： <div class="block"> <label>Simple label</label> <input type="text" /> </div> <div class="block"> <label>Label with more text</label> <input type="text" /> </div> <div class="block"> <label>Short</label> <input type="text" /> </div> コードスニペットを実行する結果を非表示スニペットを展開

136 html  css  alignment 

JavaScriptを使用して、HTML要素がコンテンツからオーバーフローしたかどうかを（スクロールバーに関係なく）チェックできますか？たとえば、小さい固定サイズの長いdiv、overflowプロパティが可視に設定され、要素にスクロールバーがありません。

136 javascript  html  css 

アセットをプリコンパイルし、アプリケーションをプロダクションモードで実行しています。コンパイル後、インデックスページをロードすると、Chromeコンソールに次の警告が表示されます。 Failed to decode downloaded font: http://localhost:3000/fonts/ionicons.ttf?v=2.0.0 prospects:1 OTS parsing error: invalid version tag Failed to decode downloaded font: http://localhost:3000/fonts/ionicons.woff?v=2.0.0 prospects:1 OTS parsing error: invalid version tag 問題は、四角が表示される代わりにアイコンが読み込まれないことです。 カスタムフォントを使用し、コードは次のとおりです。 @font-face { font-family: 'icomoon'; src: font-url('icomoon.eot'); src: font-url('icomoon.eot?#iefix') format('embedded-opentype'), font-url('icomoon.ttf') format('truetype'), font-url('icomoon.woff') format('woff'), font-url('icomoon.svg#icomoon') format('svg'); font-weight: normal; font-style: normal; } 何が足りないのかわかりません。私はたくさん検索して解決策も試しましたが成功しませんでした。開発モードではうまく機能していますが、プロダクションモードで四角が表示されている理由がわかりません。

136 css  asset-pipeline  ruby-on-rails-4.1  custom-font 

親コンテナーでオーバーフローしているhtmlテーブルに問題があります。 .page { width: 280px; border:solid 1px blue; } .my-table { word-wrap: break-word; } .my-table td { border:solid 1px #333; } <div class="page"> <table class="my-table"> <tr> <th>Header Text</th> <th>Col 1</th> <th>Col 2</th> <th>Col 3</th> <th>Col 4</th> <th>Header Text</th> </tr> <tr> <td>An archipelago is a chain or cluster of islands. The …

136 html  css  html-table