헤더의 너비 (H1, H2 등)

내 머리글 (h1에서 h6까지)에 배경색 (페이지 배경과 다름)을 지정하고이 배경의 너비를 헤더의 텍스트 너비와 안쪽 여백 (헤더가 들어있는 컨테이너의 너비가 아닙니다. 현재 일어나고있는 것입니다).헤더의 너비 (H1, H2 등)

상당히 간단하기 때문에 코드를 보여주는 것이별로 중요하지 않습니다. (어쨌든해야합니다!). 컨테이너는 고정 너비입니다. 지금은 h1, h2, h3 etc 태그에 대해 여백, 채우기, 배경색 및 글꼴 스타일링을 설정했습니다.

편집 : 코드가 도움이 될 것 같네요! https://web.archive.org/web/20090724165158/http://adriantrimble.com/headers (Gerald의 솔루션이 적용되었지만 IE6/7에서는 여전히 작동하지 않지만 최신 브라우저에서는 여전히 문제가 있음). display : inline을 사용하면 float를 사용하여 해결할 수있는 것보다 많은 문제가 발생합니다. left 및 clear : left는 2 열 레이아웃 때문에 문제가 있습니다. 지금까지 도움을 주신 모든 분들께 감사드립니다.

출처

2009-07-21 Adrian Trimble

질문은 무엇입니까? –

간단하다면 나는 당신의 도움이 필요함에 대해 혼란스러워합니다. 우리가하지 못하는 것을 알고 있지만 코드를 보여 주면 스타일과 위치 지정이 적용될 수 있습니다. 그것은 또한 당신이 당신의 헤딩을 얼마나 깊이 중첩시키고 있는지를 보여줍니다. 코더를 돕기위한 코더 사이트입니다. 코드는 우리에게 중요합니다. –

그 코드를 보여주는 것이 좋을 것입니다. 난 너비와 파이어 폭스와 IE에서 너비와 IE의 문제를 제공하는 컨테이너에 패딩을 설정하고 있기 때문에 너비가 다른 문제가있을 수도 있다고 가정합니다. – ryanulit

나는 코멘트 후

#rightcol h1, #rightcol h2, #rightcol h3, #rightcol h4, #rightcol h6, #rightcol h6 { 
    float:left; 
    clear:left; 
} 
#rightcol p {clear:left;}

편집을 사용

포함 된 div가 떠있는 경우에는 지우기가 왼쪽 열을 지우지 않습니다. 그래서 rightcol 왼쪽 부유하고 여유

#rightcol { 
    float:left; 
    padding:70px 20px 20px 0px; 
    width:585px; 
}

출처

2009-07-21 18:47:45 Emily

불행하게도이 작업은 왼쪽 열에서 내용을 지우고 서로 지울 수있게합니다. (http://adriantrimble.com/headers/clear.html 참조). 그래도 고마워! –

그런 다음 오른쪽 열을 왼쪽으로 뜨면 지우기가 왼쪽 열을 지우지 않습니다. 내 게시물에 코드를 추가했습니다. – Emily

오, 정말 고마워! –

h1-h6은 블록 레벨 요소이며 컨테이너 (또는 몸체)에 없더라도 창 너비에 걸쳐 늘어납니다. 당신이 다음 요소는 페이지와 같은 블록 레벨 요소가 아닌 경우 헤더 후 수동 휴식을 확인해야 할 것

<h1 style="background-color:pink; display:inline-block; padding:1em;">Testheader</h1>

참고 : 하나 개의 솔루션 대신 인라인 블록으로 자신의 표시를 변경하는 것입니다.

출처

2009-07-21 18:10:53

일부 브라우저는 어떤 요소에서 display : inline-block을 사용할 수있게하지만, IE6/7은 기본적으로 인라인으로 표시되는 요소에서만이를 허용합니다. 늘 그렇듯이 IE는 모든 사람을위한 파티를 망친다. –

정답입니다 (display : inline-block;). IE 6,7에 대한 지원은 Microsoft에 의해 중단되었으며,이 피의 물건을 완전히 없애기위한 노력의 일환으로 개발자 용으로도 중단되어야합니다 (IMO). – toad

헤더 태그 (H1-H6)는 블록 레벨 요소이며, 따라서 그것은에있어, 용기의 폭을 채운다.의 막 폭에 배경을 가져올

display:inline

로 변경 본문. 이것은 인라인 요소가 다른 많은 방법으로 블록 요소처럼 동작하지 않기 때문에 다른 문제를 소개합니다.

대체 방법은 헤더 자체의 너비를 설정하는 것입니다. 만약 당신이 정말 까다로워 지길 원한다면 자바 스크립트로 그렇게 할 수 있습니다. 그래서 그것은 각 헤더에 대해 특별히 계산합니다.

약간 놀아서 상황에 맞는 것을 찾아야합니다.

출처

2009-07-21 18:11:13

기타 언급 한 바와 같이 display:inline-block;은 옵션 일 수 있지만 모든 브로셔에서는 작동하지 않습니다. 깨끗하지 - - 내가 지금 생각할 수있는 것은 헤더에게 clear:left;

다른 방법을 따르는 float:left;하고 요소주고 당신의 제목의 텍스트 주위에 스팬을 추가하고, 그에 걸쳐 배경색을 제공하는 것입니다 :

<h1><span>your text</span></h1> 

h1 span { background-color:#369; }

출처

2009-07-21 18:21:12 knittl

를 제거 내 솔루션 스팬 대신 H1과 스타일 내부의 범위를 넣어했다.

출처

2011-05-21 07:10:57 jasonc65

추가 요소 또는 표시 속성을 사용하지 않고 텍스트만큼의 너비 인 머리글 요소에 배경색을 추가하는 또 다른 방법은 CSS 첫 번째 선 선택기를 사용하는 것입니다.

예 :

h1:first-line { 
background-color: yellow; 
}

출처

2016-10-18 02:42:47 tonesforchris

당신이 원하는 경우 hxh1, h2는, h3는 등 그 안에 텍스트로와 같은을 가지고, 당신이 시도 할 수

h1 { 
    display:table; 
}

은 '아무튼 display: inline-block 또는 float: left과 같은 마진 붕괴.

참조 조각 :

#page { 
 
    background-color: #ededed; 
 
    height: 300px; 
 
} 
 
h1 { 
 
    display: table; 
 
    background-color: #10c459; 
 
    padding: 10px; 
 
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; 
 
    color: #fff; 
 
    font-size: 24px; 
 
    font-weight: 700; 
 
}

<div id="page"> 
 
    <h1>Hello world</h1> 
 
</div>

출처

2016-11-03 14:31:05

헤더의 너비 (H1, H2 등)

답변

관련 문제