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="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/020/83dbba53a2852f9d7815a2cb0a94659e-1.png"  class="lazy"  src={logo} className="App-logo" alt="logo" />
          </p>
          <p>
          <input className=&#39;target&#39; value={this.state.inputValue} onChange={this.handleInputChange} />
          <button className=&#39;red-btn&#39; onClick={this.handleBtnClick}>add</button>
          </p>
          <ul>
            {
              this.getTodoItems()
            }          </ul>
        </p>
      </Fragment>

を追加するか、ボタンに ↓ を追加するだけです。

    box-sizing: border-box;

そうできることを願っています。疑問はすべて解決しました=(:з ∠)__

推奨学習: "

css ビデオ チュートリアル

"

以上がCSSで高さが不一致になる問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。