인라인 블록 버튼 내가 두 개의 "인라인 블록"버튼이 아래의 이미지를 볼 수

Question

아래 두 개의 픽셀을 간다 2 픽셀 아래로.

예 :http://jsfiddle.net/caio/EUjeY/.

.button { 
    border-radius: 2px; 
    border: 1px solid #ddd; 
    border-bottom: 3px solid #ccc; 
    background: #eee; 
    padding: 5px 10px; 
    display: inline-block; 
} 

.button:hover { 
    background: #e7e7e7; 
} 

.button:active { 
    border-bottom: 1px solid #ddd; 
    padding: 7px 10px 5px; 
} 

이 문제를 방지 할 수 있습니까?

감사합니다.

Answer 1

당신은 당신의 .button 클래스에이를 추가 할 수 있습니다

vertical-align: top; 

작동 예 : 나는 경계 바닥을 제거하기 때문에 http://jsfiddle.net/uW7Sa/1/

Answer 2

그냥 .button의 CSS 속성 float: left을 입력하면 두 버튼이 같은 위치에 유지됩니다.

.button { 
    border-radius: 2px; 
    border: 1px solid #ddd; 
    border-bottom: 3px solid #ccc; 
    background: #eee; 
    padding: 5px 10px; 
    display: inline-block; 
    float: left; 
} 

DEMO

나는 때문에 더 많은 코드를 제공 할 것 : float: left이 포함 사업부에서 너무 제외하고, 문서의 흐름에서 버튼을 제거하기 때문에 이것은 다른 인라인 요소에 의해 영향을받지 않습니다이다 여기에 플로트를 사용하고 있지만 나머지 문서는 어떻게 보이는지 모르므로 보상 할 수 없습니다.