HTML 요소를 필드 집합/범례로 지정할 수 있습니까?

display 속성을 사용하면 HTML 요소가 스타일링 관점에서 상호 교환 가능하게됩니다. 그러나 fieldset 및 의 경우는 그렇지 않습니다.HTML 요소를 필드 집합/범례로 지정할 수 있습니까?

fieldset 및 legend처럼 다른 HTML 요소의 스타일을 지정할 수 있습니까?

2010-07-17 Jakob

이 시도 이유를하려는 경우 이전의 대답은, 잘못된 :

<body style="background-color: #f00"> 
    <div style="border: 1px solid #000"> 
     <h1 style="background: #fff; margin-top: -5px; margin-left: 10px; padding: 0 10px; width: 150px;">Foobar</h1> 
    </div> 
    <fieldset><legend>Foobar</legend></fieldset> 
</body>

을 AFAIK 그 국경 중단 효과가 할 수있는 방법이 없다는 것을 legend 요소가 fieldset의 테두리에서 발생합니다. 나는 그것이 CSS 혼자서 가능하다는 것을 믿지 않는다. 단지 fieldset 태그가 렌더링되는 방식의 일부분 일 뿐이다.

명확화 : 블록 또는 인라인 요소가 포함 된 블록 요소의 보이는 테두리에 걸쳐 지도록 배치 한 다음 컨테이너 요소의 테두리를 상자 뒤에서 끊는 방법을 모르겠습니다. 그것은 <legend>이 포함되어있는 국경에 <fieldset> 요소가있는 것입니다.

출처

2010-07-17 10:35:32

제 답변이 잘못되어서는 안됩니다. 작동하려면 특정 조건 만 있으면됩니다. 이런 종류의 "속임수"가있는 경우가 일반적입니다. 모든 솔루션에 맞는 크기는 거의 없습니다. –

글쎄, 그의 질문은 "필드 세트/전설의 쌍으로 요소를 어떻게 스타일링 할 수 있습니까?" 내가 제공 한 문서를 보면 두 개의 동일한 블록이 보입니까? –

내가 알고 싶었던 것은 CSS 표준을 사용하여'fieldset' /'legend'가 생성하는 정확한 효과를 얻는 방법이 있는지 또는'fieldset' /'legend만으로 하드 코드 된 것이 있는지입니다. '. 실제로 하드 코딩 된 것으로 보이므로이 대답을 수락합니다. – Jakob

예를 들어, 테두리가있는 DIV 요소와 배경색 세트가 DIV의 테두리와 겹치는 위치에있는 자식 머리글 요소는 필드 세트 및 범례처럼 보입니다.

매우 기본적인 예 :

<div style="border: 1px solid #000"> 
    <h1 style="background: #fff; margin-top: -5px; margin-left: 10px; padding: 0 10px; width: 150px;">Foobar</h1> 
</div>

출처

2010-07-17 10:20:20

배경이 평면이 아닌 이미지 일 때만보기가 가능합니다. –

참. 자식 머리글 요소에 배경 이미지를 적용하고 배경과 일치시킬 수없는 한. 그러나 요소가 고정 된 위치에 있어야 작동합니다. –

이 방법은 효과적이지만 ie6은 배경이 이미지 인 경우 이상하게 작동합니다. 조건부 주석은 수정할 수 없습니다. 전설 태그 (같은 정말 전설 태그처럼)이 약간 보이도록 IE6-8, FF3.6, 사파리 5, 크롬 5

.fieldset { 
    position: relative; 
    border: 1px solid #000; 
    margin: 20px; 
    padding: 20px; 
    text-align: left; 
} 

.fieldset .legend { 
    background: #fff; 
    height: 1px; 
    position: absolute; 
    top: -1px; 
    padding: 0 20px; 
    color: #000; 
    overflow: visible; 
} 

.fieldset .legend span { 
    top: -0.5em; 
    position: relative; 
    vertical-align: middle; 
    display: inline-block; 
    overflow: visible; 
} 


    <div class="fieldset"> 
     <div class="legend"> 
     <span>This is the title</span> 
     </div> 
     Test 
    </div>

출처

2010-07-18 03:26:17 joelpittet

에서 테스트 그래서 나는 코드를 수정했습니다.

<div style="border: 2px groove #ccc"> 
    <h1 style="font-weight:normal; background: #fff; margin-top: -11px; margin-left: 10px; padding: 0 10px 0 0; width: 40px; height:20px; font-size:1em;">Foobar</h1> 
</div> 
    <fieldset><legend>Foobar</legend></fieldset>

출처

2015-06-12 21:14:30

HTML 요소를 필드 집합/범례로 지정할 수 있습니까?

답변

관련 문제