なぜ高さのテキストボックスがボタンよりも小さいのですか？なぜ高さのテキストボックスがボタンよりも小さいのですか？
マイコード：
#container {
overflow: auto;
line-height: 100%;
border: 1px solid red;
}
.t,#but {
float: left;
}
#but ,.txt {
border: 1px solid #999;
padding: 10px;
font-size: 20px;
}<div id="container">
<div class="t">
<input type="text" class="txt" name="">
</div>
<div id="but"><span>Search</span></div>
</div><input>素子は、置換要素の一つであり、CSSで、replaced elementは、その表現CSSの範囲外である元素です。これは、ブラウザのユーザーエージェントスタイルシートからのいくつかの特別なスタイルを持っている、と彼らはなどfont-family、font-size、line-heightとして、デフォルトで継承されませんし、それらの規則がボックスの高さを決定することができます。
<input type="text">は
<div class="t">とその親
<div id="container">などからこれらのスタイルを継承することができ、
<div id="but">と同じスタイルを取得することができますように、あなたが作るために、
<property>: inherit;を設定することで、継承を取得するためにそれらを強制することができ
それらは同じ高さです。
あなたは直接入力ボックスにそれらの特定のスタイルを設定できますが、継承を使用すると、上書きルールから防ぐことができます。また
#container {
font-size: 20px;
overflow: auto;
}
.t,
#but {
float: left;
}
.txt {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
.txt,
#but {
border: 1px solid #999;
padding: 10px;
}<div id="container">
<div class="t">
<input type="text" class="txt" name="">
</div>
<div id="but"><span>Search</span></div>
</div>、あなたは私が考える真の場合に<button>タグの代わりに、<div>ボタンを使用します。入力フィールドとボタンの高さを同じにするには、同じ値を直接入力する必要があります。padding
#container {
font-size: 20px;
overflow: auto;
}
.t,
#but {
float: left;
}
.txt,
#but {
font-family: inherit;
font-size: inherit;
line-height: inherit;
border: 1px solid #999;
padding: 10px;
}<div id="container">
<div class="t">
<input type="text" class="txt" name="">
</div>
<button id="but"><span>Search</span></button>
</div>すべての要素にfont-sizeを与えて試してみてください、彼らは同じheightのとなります。
#container {
overflow: auto;
line-height: 100%;
border: 1px solid red;
}
.t,
#but {
float: left;
}
#but,
.txt {
border: 1px solid #999;
padding: 10px;
font-size: 14px;
}<div id="container">
<div class="t">
<input type="text" class="txt" name="">
</div>
<div id="but"><span>Search</span></div>
</div>しかし、font-sizeがそれ以上の場合、シナリオは逆に –
@ SahilDhirになります。そのようなシナリオでは、要素に固定された 'height'を与えます。 –
しかし、その理由は私が原因を知る必要が起こって –
問題は、あなたの
font-sizeです。
次のフィドルのように、すべての要素にfont-sizeを与えてみてください：
#container {
overflow: auto;
line-height: 100%;
border: 1px solid red;
}
.t,
#but {
float: left;
}
#but,
.txt {
border: 1px solid #999;
padding: 10px;
font-size: 14px;
}<div id="container">
<div class="t">
<input type="text" class="txt" name="">
</div>
<div id="but"><span>Search</span></div>
</div>font-sizeが20px.whyの場合、作業しないでください。 – Ehsan
これは、有効なセレクタではありません。
line-height: 100%;
あなたがする必要がありますコンテナーの高さを定義するか、内部コンテンツを次のようにラップします。
.container .wrap{
position: relative;
display: inline-block;
width: 100%;
height: 100%;
}
次に#but要素に高さ：100％を設定します。
ブラウザは、私はそれがクロムの開発者ツールでタブを計算し、入力フィールドが上部と下部で異なる1つのピクセル以上の高さをレンダリングあなたが設定された2ピクセル実際の高ので見つけるチェック異なり差html要素や属性を処理します。
これらの行は問題を解決します。スニペットを適用する方法を確認してください。
font-size:16px;
line-height:16px;
height:16px;
font-family:sans-serif;
#container {
overflow: auto;
line-height: 100%;
border: 1px solid red;
}
.t,#but {
float: left;
}
#but ,.txt {
border: 1px solid #999;
padding: 10px;
font-size:16px;
line-height:16px;
height:16px;
font-family:sans-serif;
}<div id="container">
<div class="t">
<input type="text" class="txt" name="" placeholder="write a name" />
</div>
<div id="but"><span>Search</span></div>
</div>/あなたはシステム間でいくつかの違いがある可能性が高いですが、このような何かをする必要があります。/
.searchtext {
border:1px solid #000;
border-right:none;
padding:4px;
margin:0px;
float:left;
height:16px;
overflow:hidden;
line-height:16px;
}
.searchbutton {
border:1px solid #000;
background:#fd0;
vertical-align:top;
padding:4px;
margin:0;
float:left;
height:26px;
overflow:hidden;
width:5em;
text-align:center;
line-height:16px;
}
それはなぜなら 'フォントsize'の追加取得ではないです。あなたが使用しているすべての要素に同じフォントサイズを与えてみてください。それは動作します。 –
デフォルトでは、フォントサイズは13.333pxです。それを14pxに増やしても問題ありません。 –