CSS 높이의 단추에 추가 Float

Question

이상한 일이 여기에서 일어나고 있습니다. 스타일을 공유하는 2 개의 버튼에 대해 클래스를 사용하고 있습니다. 그러나 버튼 중 하나에 플롯을 오른쪽으로 적용하면 현실 세계에서 26px와 30px가 커집니다.

이 http://jsfiddle.net/Mag2D/에서는 1px로만 변경되지만 여전히 다릅니다.

은 내가 사용하고있는 CSS ...

.orderButton { 
    position: relative; 
    -moz-borderradius: 4px; 
    -webkit-border-radius: 4px; 
    border-radius: 4px; 
    background-color: #004282; 
    color: #fff; 
    padding: 5px 35px; 
    } 
    .right{float:right;} 

어떤 생각이 왜 이런 일이 (26)

이 http://imgur.com/3WJdvcQ 여기에 30 대 보여 요소를 검사의 화면 잡아가?

Answer 1

대답은 당신이 인라인 요소를 떠 때, 그 다음 방법 패딩을 변경하는 inline-block 요소를 될 것입니다/너비/높이/여백 속성이 그려집니다.

인라인 요소 (예 :span, a 등)을 추가하려면 패킹을 추가하려면 display: inline-block으로 설정해야합니다. 훨씬 더 일관성있는 크로스 브라우저를 보여 주며, 의도 한대로 표시 할 가능성이 높습니다.

Answer 2

솔루션 # 1 :

.left{float:left;} 

을 그리고 a 태그

<a class="orderButton left">Place Order</a> 

솔루션 # 2 left 클래스를 추가 :

는 CSS이 추가

.orderButton에서3210

는 추가 :

display:inline-block; 

당신 float 요소가 자동으로 블록 상자가되면. 이 상자는 다음 왼쪽이나 오른쪽으로 현재 행에 이동 될뿐 아니라 변경 수의 margin, padding 등

Demo #1-inline-block;와에 - 모두 a 태그

Demo #2에 float으로 대신 button 클래스

Answer 3

여기에 2 가지 문제가 있습니다. 1) 앵커는 블록 수준 요소가 아닙니다. 2) 블록 레벨이 아닌 요소를 플로팅하면 인라인 블록 레벨 요소로 바뀌어 모델이 변경됩니다.

"left"클래스를 왼쪽 버튼에 추가하고 float을 추가하여 둘 다 플로트되도록 설정하면 완벽 해집니다.

HTML :

<a class="orderButton left">Place Order</a> 

<a class="orderButton right">Place Order</a> 

CSS :

.orderButton { 
     position: relative; 
     -moz-borderradius: 4px; 
     -webkit-border-radius: 4px; 
     border-radius: 4px; 
     background-color: #004282; 
     color: #fff; 
     padding: 5px 35px; 
} 
.right{float:right;} 
.left{float:left;}