Mam zestaw pól, jak ustawić legendę wewnątrz zestawu pól z ramką? Chcę, żeby granica okrążyła legendę, a nie przez jej środek.Zapobieganie przejściu granicy elementu zestawu pól przez element legendy
fieldset {
border: 0;
padding: 0!important;
margin: 0;
min-width: 0;
border: 1px solid red;
}
legend {
padding: 0!important;
}<fieldset>
<legend>Title</legend>
</fieldset>Jedną z opcji byłoby unosić element legend w lewo:
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>Innym podejściem byłoby używanie przez outline Zamiast 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>Innym podejściem byłoby całkowicie umieścić element względemlegend do nadrzędnego Element fieldset. Jest to prawdopodobnie najmniej elastyczne podejście.
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>Podoba mi się druga opcja, zakładając, że jest to projekt PO jest po. –
'float: left' nie działa, jeśli zestaw pól (rodzic) jest ustawiony na' display: flex' – binaryfunt
@BrianFunt Żaden z podanych przeze mnie przykładów nie unosi elementu potomnego nadrzędnego kontenera flexbox. Ale tak, twoje oświadczenie jest zdecydowanie prawdziwe. Bezpośrednie elementy potomne kontenera flexbox stają się elementami flexbox (które nie zachowują się jak element normalnie pozycjonowany, a tym samym nie respektują własności 'float'). –
wariacja na temat akceptowanych odpowiedzi (używając SASS), który powinien działać we wszystkich współczesnych przeglądarkach (IE9 +)
fieldset {
> legend {
float: left;
+ * {
clear: both;
}
}
}
Usuniemy następny element po pływaka tak nie musisz się martwić, że twój układ jest pomieszany.
Brak nawiasu klamrowego po 'float: left;' – MarcGuay
Warto również wspomnieć, że ten fragment nie zadziała po wyjęciu z pudełka w żadnej z nowoczesnych przeglądarek, ponieważ jest MNIEJ i musi zostać wstępnie przetworzony. – kernel
Zmieniono komentarz, aby wspomnieć, że używa on SASS i naprawił problem z nawiasami klamrowymi. – Antfish
Nie jest jasne, o co prosisz - https://jsfiddle.net/79gaLhbd/3/ Czy możesz podać obraz tego, do czego dążysz? –
Brzydkie obejście [Fiddle] (https://jsfiddle.net/79gaLhbd/5/) – Abhi
Nie jestem pewien, czy o to prosisz, ale możesz umieścić ramkę w legendzie 'fieldset'' tak jak: [jsfiddle] (https://jsfiddle.net/79gaLhbd/6/) ... – War10ck