표시 인라인 블록이 줄 높이를 가리키는 데 영향을줍니다.

세 개의 div에서 "버튼"을 몇 개 만들었고 각 div에 마우스를 올려 놓으면 사용자가 div 위로 마우스를 가져갈 때 텍스트가 5px 떨어집니다. 내가 float:left표시 인라인 블록이 줄 높이를 가리키는 데 영향을줍니다.

유일한 문제는 사용하지 않는 내가 display:inline-block을 사용하고

내가 div의에 display:inline-block를 사용하는 경우, 대신 다른 div의를 낮추는 것입니다. 여기

는

을 (float:left 사용) 작동 방법입니다 그리고 이것은 또는 I 오전 내가 display:inline-block

을 사용할 때 수정이 거기가 무슨이다 다른 솔루션을 사용해야 할 것인가?

2014-06-16 SaturnsEye

모든 인라인 블록 요소에 대해 'vertical-align : middle'(또는 top, bottom, ...)을 명시 적으로 설정하십시오. http://jsfiddle.net/viphalongpro/y47P7/ 1/ –

국왕 임금 –

'inline-block' 엘레멘트는 기본적으로'vertical-align : baseline;'이다. – 4dgaurav

문제를 분류했습니다!

는 는 KingKing의 대답은 정확했지만 내가 그렇게처럼 일 때문에 약간 변경했다, .wkd > * {vertical-align:middle;}를 사용하여 내 코드의 나머지 부분과 잘 작동하지 않았다

: 아직도

.won, .keep, .discard { 
    vertical-align:middle; 
}

을 KingKing의 대답은 도움 내게 이것을 알아낼 수 있도록 고맙습니다 :)

2014-06-16 10:56:36 SaturnsEye

내가 킹크의 코멘트를 "모든 인라인 블록 요소에 대해 중간 (또는 상단, 하단, ...) 명시 적 세로 정렬 설정"을 읽을 필요가 있다고 생각합니다. 그는 모든 인라인 블록 요소에 대해 이렇게 말했습니다. 그것은 바이올린에 포함되어 있지 않습니다. – 4dgaurav

실제 코드가 다른 것처럼 보입니다. 데모 코드에서'.won, .keep, .discard '는'.wkd'의 *** 직접 자식입니다. 그러나 실제 코드에서는 아니. 그래서 작동하지 않습니다. –

@KingKing 그들은 올바른 코드에서 직접적인 자녀들 이었지만 어떤 이유로 인해 효과가 나타나지 않았습니다. – SaturnsEye

답변