3

My goal is to render fieldsets with a border and the legend to be located at the top with a background color. The background color of the legend should extend to the full width of the fieldset.

Based on Make a legend fill up the full width within the fieldset, I started with the following jsfiddle: http://jsfiddle.net/pdgreen/wcYXX/0.

It looks good, but fieldset has no padding, so the form elements are too close to the borders. When I add in the padding, I am left with: http://jsfiddle.net/pdgreen/wcYXX/1/.

The content looks fine, but the title not longer extends the the width of the fieldset.

If I surround the content with a div, I can add in the padding: http://jsfiddle.net/pdgreen/wcYXX/2/, however that requires the additional div.

Is there a way to make it look like the third fiddle, without the extra div?

4

1 に答える 1

5

はい、凡例の負のマージンでフィールドセットのパディングを打ち消すことによって。このようなもの: http://jsfiddle.net/wcYXX/3/

フィールドセットの余白を -5px (フィールドセットのパディングと同じですが、マイナス) に設定し、5px のパディングを追加して、テキストを元の場所に戻しました。

これは、従来のブラウザーでは十分にサポートされていないボーダー ボックスが不要になったことも意味します。

フィールドセット css は次のようになります。

fieldset legend {
    background: #369;
    color: #FFF;
    font-weight: 700;
    text-align: left;
    white-space:nowrap;

    margin: -5px;
    padding: 5px;
    display: block;
    width: 100%;

}
于 2013-01-18T19:48:37.820 に答える