ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSで高さが不一致になる問題を解決する方法
CSS の大きな不一致を解決する方法: 1. 入力に「box-sizing: border-box;」を追加します; 2. ボタンに「box-sizing: content-box;」を追加します。
この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。
CSS の不一致が大きい問題を解決するにはどうすればよいですか?
css で入力とボタンの高さが一致しない理由と解決策
まず、入力とボタンの高さが一致しない理由について説明します
React プロジェクトを勉強して Todolist を書いているときに、このような小さな問題に遭遇する前に、いくつかの情報を調べたところ、インターネット上にあらゆる種類の情報があることがわかりました。情報を確認したところ、整列はインライン要素のベースラインが異なるためであり、異なるレベルになります。解決方法も非常に簡単で、各要素に↓を追加するだけです。
vertical-align:middle;
.target { vertical-align:middle; width: 200px; height: 30px; border: 1px solid #ccc; box-sizing: border-box;}.red-btn { vertical-align:middle; width: 100px; height: 30px; background: lightcoral; color: #fff;}rree
##次に、入力の高さがボタンより 2 ピクセル高い理由について話しましょう
ボタンは常に高さに関して Quirks を使用します計算モデル。 Quirks モードでは、境界線は標準モードのように要素の幅の外側ではなく、要素の幅内で計算されます (ボタンの高さには境界線の高さが含まれますが、テキスト ボックスのテキストには境界線の高さは含まれません)。解決策も非常に簡単です。入力に ↓
<Fragment> <p className="App"> <p className="App-header"> <img src={logo} className="App-logo" alt="logo" /> </p> <p> <input className='target' value={this.state.inputValue} onChange={this.handleInputChange} /> <button className='red-btn' onClick={this.handleBtnClick}>add</button> </p> <ul> { this.getTodoItems() } </ul> </p> </Fragment>
を追加するか、ボタンに ↓ を追加するだけです。
box-sizing: border-box;
そうできることを願っています。疑問はすべて解決しました=(:з ∠)__
推奨学習: "
css ビデオ チュートリアル以上がCSSで高さが不一致になる問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。