Impedire al bordo dell'elemento fieldset di attraversare l'elemento legenda

Ho un fieldset, come posso posizionare la legenda all'interno di un fieldset con un bordo? Voglio che il confine faccia il giro della leggenda e non nel mezzo di esso.Impedire al bordo dell'elemento fieldset di attraversare l'elemento legenda

JSFiddle

fieldset { 
 
    border: 0; 
 
    padding: 0!important; 
 
    margin: 0; 
 
    min-width: 0; 
 
    border: 1px solid red; 
 
} 
 
legend { 
 
    padding: 0!important; 
 
}

<fieldset> 
 
    <legend>Title</legend> 
 
</fieldset>

fonte

2015-04-15 panthro

Non è chiaro cosa stai chiedendo - https://jsfiddle.net/79gaLhbd/3/ Potresti fornire un'immagine di ciò che cerchi? –

Una brutta soluzione [Fiddle] (https://jsfiddle.net/79gaLhbd/5/) – Abhi

Non sono sicuro se questo è ciò che stai chiedendo, ma puoi avere la casella di confine nella 'legenda' 'fieldset'' così: [jsfiddle] (https://jsfiddle.net/79gaLhbd/6/) ... – War10ck

Una possibilità sarebbe quella di galleggiare l'elemento legend a fianco:

fieldset { 
 
    border: 2px solid #f00; 
 
} 
 
legend { 
 
    float: left; 
 
    width: 100%; 
 
    padding: 0; 
 
    font-weight: bold; 
 
}

<fieldset> 
 
    <legend>This is a legend</legend> 
 
    <label>Here is an input element: <input type="text" /></label> 
 
</fieldset>

altro approccio sarebbe quello di utilizzare un outline piuttosto che un border:

fieldset { 
 
    border: none; 
 
    outline: 2px solid #f00; 
 
} 
 
legend { 
 
    padding: 0.6em 0 0; 
 
    font-weight: bold; 
 
}

<fieldset> 
 
    <legend>This is a legend</legend> 
 
    <label>Here is an input element: <input type="text" /></label> 
 
</fieldset>

altro approccio sarebbe quello di posizionare assolutamente legend elemento rispetto al genitore fieldset elemento. Questo è probabilmente l'approccio meno flessibile.

fieldset { 
 
    border: 2px solid #f00; 
 
    position: relative; 
 
    padding-top: 2.6em; /* Displace the absolutely positioned legend */ 
 
} 
 
legend { 
 
    position: absolute; 
 
    top: 0; left: 0; 
 
    padding: 12px; 
 
    font-weight: bold; 
 
}

<fieldset> 
 
    <legend>This is a legend</legend> 
 
    <label>Here is an input element: <input type="text" /></label> 
 
</fieldset>

fonte

2015-04-15 14:05:32

Mi piace la seconda opzione, assumendo che sia la il design dell'OP è dopo. –

'float: left' non funziona se il fieldset (parent) è impostato su' display: flex' – binaryfunt

@BrianFunt Nessuno degli esempi che ho postato float l'elemento figlio di un contenitore flexbox genitore. Ma sì, la tua affermazione è sicuramente vera. I figli diretti di un contenitore flexbox diventano elementi della flexbox (che non si comportano come un elemento normalmente posizionato e quindi non rispettano la proprietà 'float'). –

Una variazione sul risposta accettata (usando SASS) che dovrebbe funzionare in tutti i browser moderni (IE9 +)

fieldset { 
    > legend { 
    float: left; 

    + * { 
     clear: both; 
    } 
    } 
}

Questo cancellerà l'elemento successivo dopo il galleggiante in modo non devi preoccuparti del fatto che il tuo layout sia incasinato.

fonte

2015-10-30 10:24:48 Antfish

Manca una parentesi di chiusura dopo 'float: left;' – MarcGuay

Inoltre vale la pena ricordare che questo frammento non funzionerà fuori dalla scatola in nessuno dei browser moderni, dal momento che è MENO e deve essere sottoposto a pre-elaborazione. – kernel

Sono stati modificati i commenti per menzionare che utilizza SASS e risolto il problema del controvento. – Antfish

Impedire al bordo dell'elemento fieldset di attraversare l'elemento legenda

risposta

Problemi correlati