머리글 텍스트 끝에 아이콘 넣기

h1 태그에 머리글 텍스트가 있습니다. 텍스트 끝에 작은 아이콘이 있습니다. (텍스트의 오른쪽에 있습니다.)머리글 텍스트 끝에 아이콘 넣기

텍스트의 길이는 분명히 다릅니다.

h1 스타일을 배경 이미지, 반복 없음으로 설정했지만 div의 가장자리까지 가져옵니다.

어쨌든 나는 텍스트의 끝 부분에 항상 줄을 써야한다. 나는 내가 시도한 것처럼 이것이 bg 이미지로 할 수 없다고 추정하고 있나?

h1 { 
background-image:url(images/quotemarks.png); 
background-repeat:no-repeat; 
background-position:right;

출처

2012-07-03 Francesca

이 시도 :

h1:after { 
    content:url(images/quotemarks.png); 
}

DEMO

출처

2012-07-03 14:16:12 Engineer

는 – Francesca

@FrancescaHaselden 당신은 그것의 스크린 샷을 게시 할 수 ? 아마도 네 문제를 이해하지 못했을거야. – Engineer

@FrancescaHaselden : 어떤 브라우저를 사용해야합니까? afaik IE 9는 가상 클래스에 몇 가지 문제가 있습니다 – cypherabe

을 당신은 인라인으로 표시하고 배경 이미지를 '포함'오른쪽 측면에 여분의 패딩을 설정하기 위해 제목을 설정할 수 있습니다. 이 같은 트레이 뭔가 :

<style> 
    .h1-with-icon { 
    display: inline-block; 
    padding: 0 15px 0 0; 
    background: url('/image.gif') no-repeat top right; 
     } 
</style> 

<h1 class="h1-with-icon">Heading</h1>

참조 : Example

출처

2012-07-03 14:22:56

행운이 없으므로 오른쪽 가장자리에 여전히 있습니다 – Francesca

더 구체적으로 할 수 있습니까? h1 ("display : inline-block")의 디스플레이를 설정하면 더 이상 페이지의 전체 줄을 차지하지 않습니다. 추가 한 채우기를 추가하면 이미지가 텍스트 오른쪽으로 이동합니다. –

명확성을 위해 예제로 업데이트했습니다. –

아마 ... H1의 태그 내부 IMG와 범위를 추가하고 당신에게 당신이 원하는 결과를 제공 할 몇 가지 CSS를 사용하여, 당신을 이해합니다. ..

HTML :

<h1> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
<span class="end"><img src='some icon.png'/></span> 
</h1>

CSS :

h1{ 
    display:inline-block;position:relative; padding-right:2em 
} 
.end{ 
    position:absolute; right:0; bottom:0; width:2em 
}

데모 여기

체크 아웃 : http://jsfiddle.net/aXjzg/2/

더 많은 단서는 여기에서 찾을 수 있습니다 : 는 Place 'floating' contents at the bottom right of a paragraph of text

이 아무 운 :(여전히 오른쪽 가장자리를 마우스 오른쪽 위에 표시하지

출처

2012-07-03 15:55:48 zaf

머리글 텍스트 끝에 아이콘 넣기

답변

관련 문제