텍스트 길이에 관계없이 맨 오른쪽 위치에 이미지 위치

이미지를 200px 범위의 맨 오른쪽에 배치하고 싶습니다. 대신 "hello"텍스트의 끝에 위치하며 "hello"는 200px보다 짧기 때문에 200px 범위의 맨 오른쪽에 위치하지 않습니다.텍스트 길이에 관계없이 맨 오른쪽 위치에 이미지 위치

<span>Hello</span> 

span { 
    background-image: url("image.gif"); 
    background-position:right center; 
    background-repeat: no-repeat; 
    min-width: 200px; 
    width: 200px; 
}

출처

2012-11-01 user1032531

스팬이 기본적으로 어떤 유형의 요소를 조사 했습니까? 나는 그렇지 않다. 인라인 요소입니다. 즉, 너비 설정은 영향을 미치지 않으며 요소의 너비는 내용의 너비입니다. 디스플레이를 차단하도록 설정하십시오. –

그러나 차단하도록 설정하면 인접 요소가 인라인으로 표시되지 않습니다. – user1032531

확실하지 않습니다. 당신은 어딘가에 당신이 원하는 요소의 종류를 결정해야합니다 (그것의 기능과 함께). html5 및 css3을 사용하는 경우 display를 inline-block으로 설정할 수도 있습니다. 그러면 효과가 있습니다. 하지만 이전 버전에서는 작동하지 않습니다. –

인라인 요소 인 스팬에 너비를 설정할 수 없습니다.

display: inline-block으로 설정하면 작동합니다.

출처

2012-11-01 14:55:52 bookcasey

Perfect! 감사합니다 – user1032531

디자인을 허용하는 경우 스팬 표시 = 블록을 만들려고합니다.

span { 
    display:block; 
    background-image: url("image.gif"); 
    background-position:right center; 
    background-repeat: no-repeat; 
    min-width: 200px; 
    width: 200px;}

너는 너비를 고려하여 SPAN을 설정해야 할 수도 있습니다. 불행히도 다음 요소 집합을 다음 줄로 차게됩니다.

출처

2012-11-01 14:53:51 CSharpConductor

내가 볼 수있는 것은 200px에서 스팬을 유지할 이유가없는 것 같습니다. 오른쪽에 이미지와 크기가 같고 약간 더한 패딩을 추가하는 것은 어떻습니까?

padding-right:20px;

및 폭과 최소 폭을 없애 : 당신하여 Image.gif 넓은 16px 경우 예를 들어, 않습니다. 이렇게하면 디스플레이 및 브라우저 호환성 문제를 해결할 필요가 없습니다.

출처

2012-11-01 15:01:49

좋은 생각. 나는 이것이 나를 위해 일할 것이라고 생각한다. 나는 이것이 가장 좋은 대답이라고 생각하지만 bookcasey가 올바른 대답이다. – user1032531

텍스트 길이에 관계없이 맨 오른쪽 위치에 이미지 위치

답변

관련 문제