Google ブラウザのラベルと入力間のスペースに関する小さな問題
|
最初にコード、次にテキスト コードをコピー コードは次のとおりです。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <ヘッド> <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" /> <title>無題のドキュメント</title> <スタイル> div {幅:500px; 高さ:500px; マージン:0 自動; 境界線:#000 実線 1px;} ラベル { display:inline-block; width:100px;border:#000 solid 1px;} 入力 { border:#000 solid 1px;} </スタイル> </head> <本文> <div> <p><label>アカウント</label><input type="text" /></p> <p><label>パスワード</label><input type="text" /></p> <p> <label>確認コード</label> <input type="text" /><img src="" width="100" height="20" /> </p> </div> </本文> </html> Googleを開くことの効果は次のとおりです  認証コードのラベルと入力の間隔が上の2つよりも明らかに広いです。認証コードの改行を削除して1行にしたら、3つの入力ボックスが揃いました。原因はまだ不明です。 PS: 以前、img と input は揃っていないと書きました。これらに vertical-align:middle を追加するだけです。 |
<<: ウェブサイト開発におけるフロントエンド開発者とアーティストの知識の違い
>>: Keepalived を使用して Nginx の自動再起動とデュアルアクティブ ホットスタンバイの高可用性を実現する方法について
推薦する
JSの矢印関数におけるこのポイントの詳細な説明
矢印関数は ES6 の新機能です。独自の this はありません。その this ポイントは外部のコ...
Maven プロジェクトのリモート デプロイメント && Tomcat を使用してデータベース接続を構成する方法
1つ。 tomcat を使用したリモート展開1.1 発生した問題:プロジェクトでは、サードパーティの...
CSS 線形グラデーション凹型長方形遷移効果の実装
この記事では、線形グラデーションの凹四角形の遷移効果の難しさやアイデアについて説明します。主に、凹四...
ウェブフロントエンドコードを書く際の考慮事項のまとめ
1. HTMLタグの前に次のような文を追加するのが最適です。 <!DOCTYPE HTML P...
MySQL を使用してポート 3306 を開いたり変更したり、Ubuntu/Linux 環境でアクセス許可を開く
オペレーティングシステム: Ubuntu 17.04 64ビットMySQL バージョン: MySQL...
ウェブカラーのコントラストと調和のテクニックの共有
色のコントラストと調和対照的な状況では、色の相互作用は単一の色によって与えられる感覚とは異なります。...
MySQLの自己接続と結合の詳細な理解
1. MySQL 自己接続MySQL では、情報を照会するときに自分自身に接続 (自己接続) する必...
React Hooksの詳細な説明
目次フックとは何ですか?クラスコンポーネント機能コンポーネントフックが作られた理由要約するフックとは...
Windows で MySQL 5.7.17 圧縮バージョンをインストールするときに遭遇する落とし穴
まず、Windows 64 ビット用の最新の MySQL 5.7.17 コミュニティ圧縮バージョンを...
MySQLパスワードを変更するいくつかの方法
序文：データベースを日常的に使用すると、パスワードが単純すぎて変更する必要がある場合、パスワードの有...
Raspberry PiにDockerをインストールする方法
Raspberry Pi は ARM アーキテクチャをベースとしているため、Docker のインスト...
IE7 互換モードで IE8 を有効にするコード
最も人気のあるタグはIE8ですブラウザベンダーはバージョンアップデートのリリースに躍起になっている一...
Vueにおけるキーの役割と原理の詳細な説明
目次1. 結論から始めましょう2. キーの役割2.1 例2.2 上記の例を修正する2.3 例を再度修...
uniapp プロジェクトの最適化方法と提案
目次1. 複雑なページデータ領域をコンポーネントにカプセル化する2. 大きな画像の使用を避ける3. ...
Ubuntu 18.04 でソースコードから Odoo14 をインストールするチュートリアル
目次このシリーズの背景概要PostgreSQL データベースの準備ソースからインストール仮想環境の作...