내 문제를 설명하기 매우 간단 jsFiddle이다 DIV 높이 변경되지 않는다 div는 패딩이나 여백을 고려하지 않고 요소를 내립니다. 대부분의 경우 이것은 문제가되지 않지만, 예를 들어 상단 테두리와 패딩이있는 단추가있는 경우 div가 채우기 값을 고려하지 않기 때문에 테두리 위쪽이 잘립니다.패딩/여백/테두리 요소는 다음
모든 컨테이너 div 요소에 맹 글링이나 여백을 설정하는 것 외에 다른 영향을받을 수있는 내부 요소를 충분히 추가하기를 원한다면 해결 방법이 있습니까?
클래스 버튼과 링크가 block 요소가 아니므로 inline 요소입니다. dispaly: block을 추가하여이 기본 동작을 변경하면 예상대로 작동합니다. 증거는 jsfiddle에 있습니다.
요약하자면, 문제는 div와 관련이 없습니다. css의 문제입니다. 인라인 요소는 '공간을 예약 할 수 없기 때문에 여백 및 패딩을 무시합니다.'
업데이트 : 당신이
버튼 요소 inline입니다 찾고있을 수도 있습니다 귀하의 코멘트, here is the solution 대답합니다. 원하는 동작을 얻으려면 display:inline-block을 설정할 수 있습니다. 확인 here
봅니다 부모 DIV에 다음을 추가합니다 :
오버 플로우 :
숨겨진 나는 그것이 도움이되기를 바랍니다!
이 경우 텍스트에 맞게 너비를 어떻게 설정합니까? – ryandlf
신경 쓰지 마세요 ... 인라인 블록. – ryandlf
float left는 div의 모든 항목에 float 요소가 있어야한다는 것을 의미합니다. 그렇지 않으면 올바르게 배치되지 않습니다. 인라인 블록은 완벽하게 작동하지만 IE7에 대한 해결책이 있습니까? – ryandlf