プログラミング css

7

私はdiv次のCSSスタイルを持っています： width:335px; float:left; overflow:hidden; padding-left:5px; その中にdiv長いテキスト行を挿入すると、改行されてすべてのテキストが表示されます。私が欲しいのは、改行しないテキストを1行だけにすることです。テキストが長い場合、このあふれるテキストを消したい。高さの設定を考えていましたが、間違いのようです。多分私がフォントと同じ高さを追加した場合、それは機能し、異なるブラウザで問題を引き起こさないはずですか？どうやってやるの？

134 html css overflow

13

画面の中央に<div>要素を配置する

配置したい <div><table>画面サイズに関係なく、画面の中央に（または）要素。言い換えると、「上」と「下」の左側のスペースは等しく、「右側」と「左側」の左側のスペースは等しいはずです。CSSだけでこれを実現したいと思います。私は以下を試しましたが、うまくいきません： <body> <div style="top:0px; border:1px solid red;"> <table border="1" align="center"> <tr height="100%"> <td height="100%" width="100%" valign="middle" align="center"> We are launching soon! </td> </tr> </table> </div> </body> 注：要素（または）がWebサイトと共にスクロールするかどうかは、どちらでも問題ありません。ページが読み込まれたときに中央に配置するだけです。<div><table>

134 javascript css html

7

divの中央にテーブルを水平および垂直に配置する方法

いい<div>ねの背景画像として画像を設定できます： <style> #test { background-image: url(./images/grad.gif); background-repeat: no-repeat; background-position: center center; width:80%; margin-left:10%; height:200px; background-color:blue; } </style> <div id="test"></div> <div>縦横の中央にテーブルを設置する必要があります。を使用したクロスブラウザソリューションはありCSSますか？

134 css

2

CSSのみの石積みレイアウト

私はかなり一般的な石積みレイアウトを実装する必要があります。ただし、いくつかの理由により、JavaScriptを使用したくありません。パラメーター：すべての要素の幅は同じです要素の高さがサーバー側では計算できない（画像とさまざまな量のテキスト）必要な場合は、固定数の列を使用できますこれには、最新のブラウザーであるプロパティで機能する簡単な解決策がありcolumn-countます。そのソリューションの問題は、要素が列に順序付けられていることです。要素を行に並べる必要がありますが、少なくともおよそ：私が試したアプローチは機能しません：アイテムの作成display: inline-block：垂直方向のスペースを無駄にします。アイテムを作るfloat: left：笑、いいえ。これで、サーバー側のレンダリングを変更して、項目数を列数で割って項目を並べ替えることができますが、これは複雑でエラーが発生しやすい（ブラウザーが項目リストを列に分割する方法に基づいている）ので、可能であればそれを避けるために。これを可能にするいくつかの新しいflexboxマジックがありますか？

134 html css flexbox css-grid

14

HTML5プレースホルダーのCSSパディング

私はすでにこの投稿を見て、プレースホルダーのパディングを変更するためにできることはすべて試しましたが、残念ながら、協力したくないようです。とにかく、CSSのコードは次のとおりです。（編集：これはsassから生成されたcssです） #search { margin-top: 1px; display: inline; float: left; margin-left: 10px; margin-right: 10px; width: 220px; } #search form { position: relative; } #search input { padding: 0 10px 0 29px; color: #555555; border: none; background: url('/images/bg_searchbar.png?1296191141') no-repeat; width: 180px; height: 29px; overflow: hidden; } #search input:hover { color: #00ccff; …

133 html google-chrome webkit css

6

CSSを使用してテキストをストレッチできますか？

CSSでテキストをストレッチできますか？フォントを大きくしたくないので、横にある小さなテキストよりも太く表示されます。テキストを垂直方向に引き伸ばして、変形させたいだけです。これは1つのdivにあり、その横の通常のテキストは別のdivにあります。これどうやってするの？

133 css

3

CSS @ font-face-「src：local（ '☺'）」はどういう意味ですか？

私は@font-face初めて使用して、fontsquirrelからフォントキットをダウンロードしました彼らが私のCSSに挿入することを推奨するコードは次のとおりです。 @font-face { font-family: 'junctionregularRegular'; src: url('Junction-webfont.eot'); src: local('☺'), url('Junction-webfont.woff') format('woff'), url('Junction-webfont.ttf') format('truetype'), url('Junction-webfont.svg#webfontoNEpZXy2') format('svg'); } さて、にこにこ顔が困ってます。しかし、src内のURLの数もそうです-なぜそれらはそれほど多くのファイルを推奨し、ページがレンダリングされるときにそれらすべてがブラウザーに送信されるのですか？.ttf以外をすべて削除することに害はありますか？

133 css font-face

1

Bootstrapがline-heightプロパティを1.428571429に設定するのはなぜですか？

line-height: 1.428571429; Bootstrapline-heightがこの値に設定されるのはなぜですか？（テーマによっては、1.42857143に丸められます。）

133 twitter-bootstrap css

6

ブートストラップ3の選択タグからボーダー半径を削除

これはささいな問題のようですが、わかりません。 Bootstrapsの独自のWebサイトには、Selectの例があります。コードを見ると、その選択要素に4の境界半径があるように見えます。私の希望は、border-radiusを0に変更すると、select要素からborder-radiusが削除されることですが、そうではありません-下の図に示すように。その選択要素を変更しているすべてのCSSを調査しましたが、いずれも境界線の半径を削除していないようです。

133 css twitter-bootstrap

2

スラッシュを含むCSSのフォントのサイズ

ここでスラッシュはどういう意味ですか： font: 100%/120%;

133 html css size

10

jQueryを使用してCSSを変更するには？

jQueryを使用してCSSを変更しようとしています： $(init); function init() { $("h1").css("backgroundColor", "yellow"); $("#myParagraph").css({"backgroundColor":"black","color":"white"); $(".bordered").css("border", "1px solid black"); } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div class="bordered"> <h1>Header</h1> <p id="myParagraph">This is some paragraph text</p> </div> コードスニペットを実行する結果を非表示スニペットを展開ここで何が欠けていますか？

133 javascript jquery css

2

：後vs ::後

CSS 2.1 :afterとCSS 3の::after疑似セレクター（::after以前のブラウザーではサポートされていないものを除く）の間に機能的な違いはありますか？新しい仕様を使用する実用的な理由はありますか？

133 css css-selectors pseudo-element pseudo-class

15

CSSを使用して「必須フィールド」のアスタリスクを自動的に追加して入力を形成する

このコードが期待通りに機能しないという不幸な事実を克服する良い方法は何ですか？ <div class="required"> <label>Name:</label> <input type="text"> </div> <style> .required input:after { content:"*"; } </style> 完全な世界では、必要なすべてinputのに、フィールドが必要であることを示す小さなアスタリスクが表示されます。CSSは要素自体の後ろではなく要素のコンテンツの後に挿入されるため、この解決策は不可能ですが、理想的なものになります。何千もの必須フィールドがあるサイトでは、アスタリスクを入力の前に1行変更（:afterto :before）するか、ラベルの最後（.required label:after）またはラベルの前に移動するか、または収納ボックス上の位置などこれは、アスタリスクをどこに配置するかについて気が変わった場合だけでなく、フォームのレイアウトでアスタリスクを標準の位置に配置できない奇妙な場合にも重要です。また、フォームをチェックしたり、不適切に入力されたコントロールを強調表示したりする検証にも適しています。最後に、追加のマークアップは追加されません。不可能コードの利点のすべてまたはほとんどを備えた優れたソリューションはありますか？

133 css forms validation standards

16

Bootstrap 4カードをカード列で同じ高さにするにはどうすればよいですか？

私はBootstrap 4 alpha 2を使用しており、カードを利用しています。具体的には、公式ドキュメントから取得したこの例を使用しています。すべてのカードを同じ高さにするにはどうすればよいですか？私が今考えられるのは、次のCSSルールを設定することだけです。 .card { min-height: 200px; } ただし、これはハードコーディングされたソリューションであり、一般的なケースでは機能しません。私の見解のコードはドキュメントのコードと同じです： <div class="card-columns"> <div class="card"> <img class="card-img-top" data-src="..." alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title that wraps to a new line</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This …

133 html css twitter-bootstrap bootstrap-4 bootstrap-cards

11

iPhone 5 CSSメディアクエリ

iPhone 5は画面が長く、私のウェブサイトのモバイルビューを捉えていません。iPhone 5の新しいレスポンシブデザインクエリとは何ですか？既存のiPhoneクエリと組み合わせることができますか？私の現在のメディアクエリはこれです： @media only screen and (max-device-width: 480px) {}

132 iphone css responsive-design media-queries iphone-5

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

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