텍스트를 1px 수평선과 겹치게 만들기

텍스트를 수평선에 넣으려고합니다. 텍스트 길이가 늘어나면 텍스트 길이에 따라 줄을 조정해야합니다. IE7,8, Mozilla에서 잘 작동합니다. Google 크롬에서 작동하도록하고 싶습니다.텍스트를 1px 수평선과 겹치게 만들기

Google 크롬을 제외하고는 정상적으로 작동합니다.

/*CSS*/ 
.pageHD{ font-size:30px; color:#369; font-weight:bold; padding:20px 0} .pageHD p{display:block; margin-right:10px} 
.title-line{ height:1px; border:0 none; background:#e5e5e5; position: relative; right:0; top:0px} 
<!--HTML--> 
<div class="pageHD"><p class="left">Zones Showcases</p> <hr class="title-line" /></div>

이 사람이 나를 도울 수 : 다음은 내 코드입니다. 고맙습니다.

출처

2013-08-07 VIKAS HATWAL

Hmmmm .. '

'요소는 항상 컨테이너의 전체 너비에 걸쳐 있습니다. 또한 위치 지정 규칙은 아무것도 수행하지 않으므로 제거 할 수 있습니다. 나는 당신이 무엇을하려고하는지 이해하지 못한다 ... '

'이 텍스트만큼 길어야 하는가? 그 경우'.pageHD p'에'border-bottom'을 넣으십시오. – inorganik

저는 파이어 폭스에 있고, 당신의 줄은 당신의 글자와 길이가 다릅니다. 나는 당신이하려고하는 것을 이해하지 못합니다. – andi

다음은 귀하의 궁금한 점입니다.

텍스트를 hr 요소와 겹치게하고 싶습니다.

질문을 이해하는데 착각하지 않으면 내 대답이됩니다.

hr 다음에 내용을 작성하면 hr과 겹칠 것입니다.

<div class="pageHD"><hr class="title-line" /></div>

그리고 새로운 CSS는 다음과 같습니다 :

새 HTML이 될 것

.pageHD { 
    font-size:30px; 
    color:#369; 
    font-weight:bold; 
    padding:20px 0 
} 
.pageHD p { 
    display:block; 
    margin-right:10px 
} 
.title-line{ 
    height:1px; 
    border:0 none; 
    background:#e5e5e5; 
    position: relative; 
    right:0; 
    top:0px; 
    z-index: 0; 
} 
.title-line:after { 
    position: absolute; 
    content: 'Zone Showcases'; 
    bottom: -15px; 
    z-index: 1; 
}

가 jsFiddle 예이다 : jsFiddle Example

출처

2013-08-07 15:04:54

이 문제를 해결할 수

border-bottom:1px solid #e5e5e5;

이것을 확인하십시오 fiddle

출처

2013-08-07 15:12:11 Sara

브라우저가 잘못되었거나 Chrome에서만 작동하지 않습니까? 텍스트는 jsFiddle 예제에서 hr과 겹치지 않습니다. –

텍스트를 1px 수평선과 겹치게 만들기

답변

관련 문제