Jak umieścić legendę w zestawie ramek z obramowaniem?
Według kilku linków w internecie, niemożliwe jest umieszczenie legendy. Zasugerował więc podsumowanie tego w wielki sposób:
<legend><span>Foo</span></legend>
Następnie możemy ustawić rozpiętość w zestawie pól. ale kiedy chcę dodać ramkę na górze zestawu pól, jest miejsce na legendę. Na szczęście odkryłem, że dodanie obramowania do legendy również naprawia tę małą, malutką białą przestrzeń, ale jest to brzydkie rozwiązanie (jak wszystko inne z css). Czy masz bardziej przemyślane rozwiązania tego problemu?
uwaga: znalazłem rozwiązanie w tym samym czasie, gdy zacząłem pisać to pytanie, więc nadal chcę je zadać.
Nie znaleziono powiązanych wyników
Zaproszony:
Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się
10 odpowiedzi
Anonimowy użytkownik
Potwierdzenie od:
Przykładowy kod Codepen:
http://codepen.io/vkjgr/pen/oFdBa
http://codepen.io/vkjgr/pen/oFdBa
Anonimowy użytkownik
Potwierdzenie od:
Legenda po prostu się nie zachowa!, Więc najlepszym rozwiązaniem, jakie znalazłem, było ustawienie jej bezwzględnej i wypełnienie wierzchołka na zestawie pól. Przykład JSFildle:
http://jsfiddle.net/carlosmartinezt/gtNnT/356
http://jsfiddle.net/carlosmartinezt/gtNnT/356/
/
fieldset {position:relative;
padding-top:50px;
}legend {
position:absolute;
top:20px;
left:18px;
}
Anonimowy użytkownik
Potwierdzenie od:
http://jsfiddle.net/leaverou/gtNnT
http://jsfiddle.net/leaverou/gtNnT/
/
Anonimowy użytkownik
Potwierdzenie od:
Anonimowy użytkownik
Potwierdzenie od:
legend {margin-left:50px;}/* 50px from Left of the Fieldset */Anonimowy użytkownik
Potwierdzenie od:
fieldset {padding-top:50px;
}fieldset legend {
margin-bottom:-50px;
}
Anonimowy użytkownik
Potwierdzenie od:
fieldset legend {position:relative;
left:20px;
}
Anonimowy użytkownik
Potwierdzenie od:
Anonimowy użytkownik
Potwierdzenie od:
Anonimowy użytkownik
Potwierdzenie od:
Dodaj obramowanie do etykiety legendy
legend {padding: 2px;border: 1px solid green;}