高度屬性怪異。 css

Question

我看起來更詳細的問題是我有div元素，其中一些按鈕和我需要一個按鈕來佔據它上面的空間，但每當我改變其高度並正確定位時，它就會將按鈕移動到下一個它會下降一些。

---

#Cal_Border { 
background-color:white; 
border:1px solid black; 
display:inline-block; 
padding:2px; 
} 

#Num_View { 
background-color:white; 
border:1px solid black; 
width:98.4%; 
} 

.Button { 
background-color:white; 
border:1px solid black; 
width:22.9%; 
height:10%; 
padding-top:2px; 
margin-bottom:0; 
margin-bottom:2px; 
} 

#Equals { 
height:40px; 
position:relative; 
top:-20px; 
} 

#Cal_Border input:focus { 
outline:none; 
} 

---

<div id="Cal_Border"> 
     <input type="text" id="Num_View" /><br /> 
     <input type="button" value="<--" class="Button" /> 
     <input type="button" value="C" class="Button" /> 
     <input type="button" value="-/+" class="Button" /> 
     <input type="button" value="/" class="Button" /><br /> 
     <input type="button" value="1" class="Button" /> 
     <input type="button" value="2" class="Button" /> 
     <input type="button" value="3" class="Button" /> 
     <input type="button" value="x" class="Button" /><br /> 
     <input type="button" value="4" class="Button" /> 
     <input type="button" value="5" class="Button" /> 
     <input type="button" value="6" class="Button" /> 
     <input type="button" value="-" class="Button" /><br /> 
     <input type="button" value="7" class="Button" /> 
     <input type="button" value="8" class="Button" /> 
     <input type="button" value="9" class="Button" /><br /> 
     <input type="button" value="0" class="Button" /> 
     <input type="button" value="." class="Button" /> 
     <input type="button" value="+" class="Button" /> 
     <input type="button" value="=" class="Button" id="Equals" /> 
</div> 

Answer 1

我想我得到它非常接近你想怎麼。檢查小提琴，讓我知道。

http://jsfiddle.net/Ru3QA/2/

#Cal_Border { 
background-color:white; 
border:1px solid black; 
display:inline-block; 
padding:2px 0 0 2px; 
} 

#Num_View { 
background-color:white; 
border:1px solid black; 
width:96%; 
    margin-bottom: 2px; 
} 

.Button { 
background-color:white; 
border:1px solid black; 
width:22%; 
height:10%; 
padding-top:2px; 
margin-bottom:0; 
margin-bottom:2px; 
} 

#Equals { 
height:40px; 
position: relative; 
top:-20px; 
    float: right; 
    left: -5px; 
} 

#Cal_Border input:focus { 
outline:none; 
} 

---

選項2，可能是更好的

http://jsfiddle.net/Ru3QA/3/

我只是給#Cal_border {位置：相對; }

，並改變了一個等於

#Equals { 
    height:40px; 
    position: absolute; 
    bottom: 5px; 
    right: 5px; 
}