div 또는 다른 방법을 사용하여 단락 텍스트와 함께 헤더를 인라인으로 표시하는 방법

div 또는 다른 방법을 사용하여 단락 텍스트와 함께 헤더를 인라인으로 표시하는 방법

WordPress 위젯에 다음과 같은 간단한 스니펫이 있습니다.

 <h3>Kevin Smith</h3><h2>The Official Kevin Smith Website</h2>

프라이버시를 위해 이름이 변경되었습니다.이것들을 같은 줄에 표시할 수 있는 방법이 있습니까?

나는 CSS 인형이지만, 다음과 같은 것들을 시도해 보았다.

 <div display:inline><h3>Kevin Smith</h3><h2>The Official Kevin Smith Website</h2></div>

그러나 이것은 CSS 전문가에게 가장 명백한 이유로 작용하지 않는다.

이것들을 같은 라인에 배치하는 방법을 가르쳐 주시면 감사하겠습니다!

* 솔루션 갱신*

비슷한 문제가 있는 사람은 @antyrat과 @jacefarm의 도움을 받아 이 방법을 사용했습니다.

<div style="display:inline">Kevin Smith</div><p style="display:inline">The Official  
Kevin Smith Website</p>

이렇게 해서 p와는 다른 div의 스타일을 만들 수 있었습니다.둘 다 인라인입니다.그게 바로 제가 하려고 했던 겁니다

HTML 요소의 인라인 스타일은 HTML 속성으로 작성됩니다.style 속성을 사용하여 따옴표로 둘러싸인 값을 지정합니다.또한 각 CSS '[속성] 뒤에 세미콜론이 필요합니다.[value];' 쌍은 표준 CSS 스타일시트에서와 마찬가지로 'style' 속성으로 전달됩니다.

    <div>
       <h3 style="display: inline;">Kevin Smith</h3>
       <h2 style="display: inline;">The Official Kevin Smith Website</h2>
    </div>

또는 부모 'div' 요소(예: 'title')에 클래스를 할당하고 CSS 스타일시트의 'h3' 및 'h2' 태그를 다음과 같이 스타일링할 수 있습니다.

HTML

    <div class="title">
       <h3>Kevin Smith</h3>
       <h2>The Official Kevin Smith Website</h2>
    </div>

CSS

    .title h2,
    .title h3 {
      display: inline;
    }

를 사용해야 합니다.style속성:

<div style="display:inline">

명세서에 따르면, 당신이 찾고 있는 것은display:run-in이 StackOverflow 질문에 설명되어 있습니다.고객님의 경우 다음과 같습니다.

h2 { display:run-in; }
p  { display:block; } // default

<h2>Kevin Smith</h2>
<p>The Official Kevin Smith Website</p>

유감스럽게도 그 코드 조각은 작동하지 않습니다.그 이유는 사실상 대부분의 브라우저가 포기되었기 때문입니다.display:run-in심지어 이전에 가지고 있던 것들도요.이 기능은 프로덕션 준비가 되지 않았습니다.Firefox에서는 지원되지 않으며 Safari(v8)와 Chrome(v32) 모두에서 제거되었습니다.하지만 당신이 요구하는 인쇄상의 행동을 정확하게 기술하고 있습니다.

이 질문은 회피책을 시도한 다른 스레드에 대한 링크를 제공합니다.

언급URL : https://stackoverflow.com/questions/25327107/how-to-display-a-header-inline-with-paragraph-text-using-divs-or-an-alternative