제목 (H1, H2 등) 태그 내에 요소를 배치하는 방법은 무엇입니까?

Question

이것은 쉽지 않은 것처럼 보입니다. 그러나 그것은 나를 미치게합니다 !!

텍스트 나 텍스트가 포함 된 헤더 요소 오른쪽에 버튼이나 다른 입력 요소를 배치 할 수 있어야합니다.

기본 마크 업입니다

<h3>Order Details <input type="button" value="Refund" id="btnRefund" /></h3> 

원하는 결과는 텍스트 "주문 정보"는 H3 요소의 왼쪽에 있고 버튼은 오른쪽에있는 것입니다. 명백한 해결책은 align : right를 버튼에 추가하는 것입니다. 그러나 이로 인해 버튼이 H3 요소 외부에 표시되거나 텍스트와 함께 표시되지 않습니다.

H3 요소의 position 속성을 다양하게 조합하고 div 및 span 태그에 텍스트를 래핑했습니다.

나는 이것에 대한 해결책을 얻을 때 나는 내 자신을 차기 할 것이라고 확신한다.

편집/업데이트 : 나는 등의 배경 색상을 포함하여 이미 외부 스타일 시트에 스타일 H3 꽤 오래된 시스템을 취급하고 있습니다로도 있습니다 (지금은 어쨌든 용) nickf의 대답을 고수하고있다 H3 태그의 많은 인스턴스가 중첩 된 요소없이 사용되며 나에게 div 태그를 사용하여 H3 태그의 스타일을 복제하는 것은 이치에 맞지 않습니다.

처음부터 시작했다면 Mark의 답변을 고려했을 것입니다.

Answer 1

당신은 W3C의 준수

<h3><input type="button" style="float: right">Order Details</h3> 

Answer 2

그 것이다 아니에요 먼저 넣어했다?

는

당신은, 사업부에

<div><h3>Order Details</h3><input type="button" value="Refund" id="btnRefund" /></div> 

를 전체를 감싸 그리고 당신은 균일 한 어떤 형태의 모양을 필요로하는 경우 오히려 H3보다, 사업부에 스타일을 적용 할 수 없습니다 ? h3을 왼쪽으로 플로팅하거나 display:inline을 사용하여 나란히 표시되도록하십시오.

Answer 3

마크와 닉 F.에 의해 영감을 얻은 후에 제가 끝내게 된 것은 여기에 있습니다. 그것은 약간의 kludge이지만 내 감각을 더 호소합니다. h3는 여전히 부모 요소입니다. 적어도 나를 의미 론적으로 이해합니다.

<h3 style="position:relative;"> 
    <span style="position:absolute;">Order Details</span> 
    <span style="text-align:right; 
       width:100%; 
       position:absolute"> 
     <input type="submit" name="btnRefund" value="Refund" id="btnRefund" 
     class="TextFields" /></span></h3> 

스타일은 분명히 스타일 시트에 있어야합니다.

이 접근 방식의 단점은 Nicks 대답보다 Mark가 더 많다는 것입니다. 또한 h3에서 마지막 문자로 비 분리 공간을 두는 작은 kludge가 있습니다.