高度属性怪异。 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; 
}