爲什麼高度文本框小於按鈕？爲什麼高度文本框小於按鈕？
我的代碼：
#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等，這些規則能夠確定一個框的高度。
您可以強制他們只需設置<property>: inherit;，使<input type="text">可以繼承<div class="t">這些風格與其父<div id="container">等繼承，所以這將是能夠得到同樣的風格爲<div id="but">，爲了使它們的高度相同。
您可以直接設置輸入框的具體樣式，但使用繼承可以重寫規則阻止。
#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>但是如果字體大小超過了這個情況，那麼它將會與 –
@SahilDhir相反。所以在這種情況下給你的元素一個固定的「高度」。 –
但爲什麼它的發生我需要知道原因 –
的問題是你的
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>不工作，如果字體大小爲20px.why？ – Ehsan
這不是有效的選擇：
line-height: 100%;
你必須定義容器的高度，或者用你的內容包裝：
.container .wrap{
position: relative;
display: inline-block;
width: 100%;
height: 100%;
}
然後將高度：100％設置爲#but元素。
瀏覽器處理HTML差異元素和屬性的不同我檢查它在Chrome開發者工具計算選項卡，並找出輸入字段不同的1個像素更多的頂部和底部呈現高度，其設置2px的實際高度。
這些線將解決您的問題，檢查如何應用它們的片段。
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.333像素。增加到14px，你會沒事的。 –