끝 CSS 스프라이트 단추 표 안쪽에서 떨어지는

나는 CSS 단추를 만들고있어 완벽하게 완벽하게 작동합니다. 문제는 버튼이 할당 된 공간보다 클 때 끝이 다음 줄로 떨어지는 것입니다. 또한 페이지 너비를 적절하게 확장하지만 끝은 다음 줄에> = (페이지 확장은 완벽하지만 단추는 전체가되어야합니다 ..끝 CSS 스프라이트 단추 표 안쪽에서 떨어지는

여기 내 예제 페이지입니다 ... http://www.lolstrategies.com/test/button_sample.html

그것은 두 개의 테이블을 사용하고 버튼은 테이블에 있어야

나의 현재 CSS는 플로트를 사용합니다.. 소스를 보면 당신이 볼 수있는 함께 이미지를 밀어 왼쪽 나는 희망하고있다 모든 것을 플로트없이 완전히 다시 할 필요는 없지만 유일한 대답이라면 기꺼이 그렇게 할 것입니다.

,210

내가 사용하고 이미지는 이것이다 :

enter image description here

출처

2011-08-30 Craig

, 당신은 공백과 같은 형식의 어떤 종류없이 HTML 요소의 내부 텍스트를 넣을 경우는 다음의 요소 폭에서 확장하는 것 : 숨겨진; -이 이유는 나에게 약간 불분명하지만이 방법으로 작동하는 것 같습니다. –

두 번째 요소에 충분한 공간이 없을 때 "float : left"가 항상이 작업을 수행합니다. 더 많은 공간을 제공하거나 다른 접근법을 사용해야합니다. – Blazemonger

당신은 완전히 다시 할 필요가 없습니다. 약간의 작은 변화. 라이브 예 : 오버 플로우를 통해 별도로 명시하지 않는 한 나의 이해에서 http://jsfiddle.net/tw16/Pwmcn/

.buttonLarge { 
    height:22px; 
    margin: 0 22px 0 12px; /* add this */ 
} 
.primaryLargeButtonEnd { 
    width: 12px; 
    height:12px; 
    padding: 0px 0px 0px 5px; 
    display: inline-block; /* add this instead of float:left */ 
    background: transparent url('./composite__V153767378_.png') no-repeat left -75px; 
}

출처

2011-08-30 20:09:35 tw16

확실히 파이어 폭스에서 트릭을 ...하지만 IE를 사용하면 꽤 파괴 보입니다. IE에서 라이브 예제를 살펴 보았는데 js-fiddle의 렌더러가 IE보다 Firefox가 많을 것으로 추측됩니다. 내 예제 (http://www.lolstrategies.com/test/button_sample.html)를 업데이트하여 IE에서 어떻게 보이는지 볼 수 있습니다. 도와 주셔서 감사합니다! IE 고정에 대한 아이디어? – Craig

@ user379467 : doctype을 적용하지 않았기 때문에 IE에서 엉망으로 보이는 이유는 예제에 적용했을 때입니다. 이것은 IE가 단점 모드로가는 것을 의미합니다. ''태그가 있기 전에도 문서의 맨 처음에''을 넣으면 IE가 표준 모드로 바뀌는 것을 다시 확인합니다. – tw16

끝 CSS 스프라이트 단추 표 안쪽에서 떨어지는

답변

관련 문제