Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css][html] wyśrodkowanie w formularzu
Forum PHP.pl > Forum > Przedszkole
aladin07
witam

moj problem polega na wysrodkowaniu pol label i input czy tez select w
wierszu listy uporzadkowanej

formularz wyglada powiedzmy tak :

  1. <form name="" action="" method="">
  2. <ul>
  3. <li><label>name1</label>
  4. <input type="text" name="name1" id="name1" size="30" />
  5. </li>
  6. <li><label>name2</label>
  7. <input type="text" name="name2" id="name2" size="30" />
  8. </li>
  9. <li><label>name3</label>
  10. <input type="text" name="name3" id="name3" size="30" />
  11. </li>
  12. <ul>
  13. </form>


i teraz powiedzmy ze ustawiamy css'em

  1. li{
  2. height: 40px;
  3. }
  4. li label{
  5. float: left;
  6. font:10px;
  7. }
  8. li input{
  9. float: left;
  10. height:30px;
  11. }



teraz chodzi mi o to ze w liscie ustalam wysokosc wieksza niz wysokosc label i input
i wszystko ustawia mi sie idealnie przy gornej krawedzi
a chcialbym zeby zarowno label jak i input ustawial sie w srodku wyokosci li ale nie mam pojecia
jak to zrobic - a juz pare tutoriali przejrzalem - tam jednak nikt nie ustawia jak ja wyskosci
li
i nie chodzi mi tu o ustawianie za pomoca paddingow czy marginow - zeby po zmianie
wysokosci li nie bylo znowu dlubania w css-ie

czy jest w ogole taka mozliwosc?
melkorm
Jeżeli dobrze rozumiem o co Tobie chodzi to jest opcja line-height ale bodajże oczywiście IE tego nie "przełknie" więc już lepiej chyba zrobić padding/margin niż bawić się w komentarze warunkowe dla IE ... ale to moja opinia może jest jakieś lepsze rozwiązanie to z chęcią posłucham x)
aladin07
to line-height juz przerabialem ale z tego co pamietam dawalo to tylko efekt dla samego
label a input dalej siedzial przy gornej krawedzi li
melkorm
hmm a przypadkiem li nie łapie tych floatów i tak jakby ten label i input "nie są" w li ? Bo tak mi się zdaje że tak własnie jest ... daj tylko dla li float:left, i zobacz co się stanie biggrin.gif

no i ogólnie przypisywanie float'u el liniowemu?

Cytat
to line-height juz przerabialem ale z tego co pamietam dawalo to tylko efekt dla samego
label a input dalej siedzial przy gornej krawedzi li


a tak się działo bo float dla label nei działał, i li go "łapało" a input z floatem nie brał tego pod uwagę bo jest tak jakby w "powietrzu".

Nie wiem czy dobrze wyjaśniłem ale bankowo te floaty są złe tongue.gif
aladin07
no coz czlowiek sie caly czas uczy a glupie bledy i tak bedzie popelnial - ale moze za jakis czas juz sie ich ilosc zniweluje znacznie smile.gif



w kazdym razie te floaty pomogly:) na wysrodkowanie label i input wzgledem li - za co serdecznie dziekuje

ale z drugiej strony teraz zarowno label (ktore jak to z tekstem bywa przyjmuje rozna szerokosc) jak i input
sa rownane do lewej
i mimo ze dla label ustawiam width o stalej szerokosci - w celu rownego ustawienia inputow
od lewej krawedzi li to i tak przegladarka ustawia szerokosc adekwatnie do ilosci tekstu w label
oczywiscie margin-left dla inputa nie pomoze

co tu mozna by zastosowac?
melkorm
możesz im narzucić wyświetlanie blokowe, display:block :] I dopiero wtedy możesz nadawać szerokość i wysokość smile.gif
aladin07
no tak ale wracamy tu chyba do punktu wyjscia
nadanie im display:block (chyba ze znowu czegos nie wiem) bedzie wymagalo nadanie im
floatow zeby ustawic je w jednym rzedzie a nie jeden pod drugim - czyli znowu wszystko wyladuje przy gornej krawedzi li
a jak daje display:block-inline nadal nie daje mi mozliwosci regulowania szerokosci

ze tak sie glupio spytam o co w tym wszystkim chodzi?smile.gif
melkorm
Chodzi o dobre zrozumienie CSS'a tongue.gif

No i jeżeli chcesz mieć "wydzielone miejsce" na text, musisz to ubrać w el. blokowy - po to one są by opisywać elemnty blokowe.

Lub tak ułożyć poprzednie warstwy że taka sytuacja nie będzie potrzebna, ale to już kwiestia projektu / założeń itp.

No i chyba tutaj będziesz musiał uzyć display:block; i floatów ;]

tzn. gdy się widzi resultat itp to napewno kod można by uprościć nie chce Tobie źle radzić ... no ale na ten moment tylko tyle moge powiedzieć, najlepiej to pobaw się z display:block; itp. eksperymentuj testuj na kilku przeglądarkach - i te rozwiązanie które będzie najbardziej uniwersalne użyj smile.gif
aladin07
no to w takim razie chyba jedynym sposobem bedzie

  1. li{
  2. height:40px;
  3. display:table;
  4. }
  5. li label, li input{
  6. margin:0 auto;
  7. display:table-cell;
  8. vertical-align:middle;
  9. }
  10. li input{
  11. height: 30px;
  12. width: 130px;
  13. }
  14. li label{
  15. font: 10px;
  16. width: 70px;
  17. }


po prostu mslalem ze sa moze jakie bardziej eleganckie rozwiazania
no ale moze to wcale nie jest nieeleganckie:)
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.