フォームを作成するときに、名前、携帯電話番号、出生地などの 2 つのフィールドを揃える状況に遭遇することがよくあります。このように、text-align スタイルと text-justify スタイルを使用する必要があります。 text-align を justify に設定するだけです。text-justify の状況は複雑で、慣れていない人もいるかもしれません。 IEの値は次のとおりです。
しかし、これは元々 text-overflow、overflow-x などの IE のプライベート機能として実装されたもので、FF では非常に遅い段階まで実装されませんでした。つまり、厳密な互換性の問題があります。さらに、FF と Chrome では、この機能を有効にするために、中国語の文字の間にスペースまたはソフト改行を手動で挿入する必要があり、Chrome で発生する抵抗はさらに大きくなります。翻訳する プラン: .テスト1 { テキスト配置:両端揃え; テキストの両端揃え:すべての行を均等に分配;/*ie6-8*/ テキスト配置最後:両端揃え;/* ie9*/ -moz-text-align-last:justify;/*ff*/ -webkit-text-align-last:justify;/*chrome 20+*/ } @media screen および (-webkit-min-device-pixel-ratio:0){/* chrome*/ .test1:後{ コンテンツ:"。"; 表示: インラインブロック; 幅:100%; オーバーフロー:非表示; 高さ:0; } } コードを実行します: <!DOCTYPE HTML> <html> <ヘッド> <title>テキストの配置</title> <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=UTF-8"> <スタイル> .box1{ 背景:赤; 幅:30%; } .テスト1 { テキスト配置:両端揃え; テキストの両端揃え:すべての行を均等に分配;/*ie6-8*/ テキスト配置最後:両端揃え;/* ie9*/ -moz-text-align-last:justify;/*ff*/ -webkit-text-align-last:justify;/*chrome 20+*/ } @media screen および (-webkit-min-device-pixel-ratio:0){/* chrome*/ .test1:後{ コンテンツ:"。"; 表示: インラインブロック; 幅:100%; オーバーフロー:非表示; 高さ:0; } } </スタイル> </head> <本文> <div class="box1"> <div class="test1">名前</div> <div class="test1">名前 名前</div> <div class="test1">名前</div> <div class="test1">場所</div> <div class="test1">職場</div> </div> </本文> </html> 要約する 上記はエディターが導入した CSS テキスト配置の実装コードです。皆様のお役に立てれば幸いです。ご質問がございましたら、メッセージを残していただければ、エディターがすぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。 |
>>: VirtualBoxにOpenSuseをインストールする方法
目次関連する依存関係のインストールドッカーDockerでJenkinsをインストールするDocker...
ドロップテーブルドロップはテーブル情報を直接削除するため、最も高速ですが、データを取得することはでき...
シナリオ:テーブル内のデータは、同期ツールを使用して他のデータベースと同期する必要があり、増分同期に...
目次1. はじめに2. データを消去するいくつかの方法2.1 ref() の使用2.2 スライスの使...
目次1. import_tableの紹介2. データのロードとテーブル関数のインポートの例2.1 L...
この記事では、MySQL が乱数を生成し、文字列を連結する方法について例を使用して説明します。ご参考...
100 以内の自然数をランダムに選択し、プレイヤーに 10 ラウンド以内にその数を推測させる数字推...
MySQL トランザクション分離レベルを表示する mysql> '%isolation...
インターネット上で多くの関連チュートリアルを見てきましたが、インストール プロセスにはまだいくつかの...
この記事では、参考までにMySQL 8.0.15のインストールと設定方法のグラフィックチュートリアル...
情報を探すインターネットで見つかったいくつかの方法: autocomplete="off&...
標準化されたデザインソリューション - マークアップ言語とスタイルマニュアルWeb 標準ソリューショ...
目次JavaScript 関数呼び出しの典型的な例JS関数の定義と呼び出し方法要約するJavaScr...
1. VMware vSphere 導入の早期計画のポイント1. vSphereの利点(わずかに)...
ウェブサイト構築におけるカラーマッチングは非常に特殊であり、ウェブサイトのテーマ、感情、雰囲気などの...