Autor Zpráva
xlifer
Profil
Je nějaké řešení jak srovnat výšku? Nedaři se mě sjednotit height pole a buttonu...

<!doctype html>

<style>
.pole {
width: 100px;
border: none;
background: #888888;
color: #ffffff;
line-height: 18px;
margin: 0;
padding: 0;
}
.button {
width: 100px;
border: none;
line-height: 18px;
margin: 0;
padding: 0;
}
</style>

<form>
<input type="text" name="neco" value="@" class="pole">
<button type="submit" class="button">Odeslat</button>
</form>
martinK
Profil
line-height je parametr pro výšku řádku na psaní. Ne prvku. Používej normální height, 22px by na button mělo stačit, aby měl stejnou výšku jako to pole.
xlifer
Profil
martinK:
line-height je parametr pro výšku řádku na psaní. Ne prvku. Používej normální height, 22px by na button mělo stačit, aby měl stejnou výšku jako to pole.
Jenže tohle mi právě nefunguje, když dám na .pole line-height: 18px a na .button height: 18px tak je každý jinak vysoký, nedaří se mě to sladit...
kolemjdoucí
Profil *
xlifer:
Podívej se, jestli u těch inputu nemáš taky nastavený nějaký padding, případně velikosti fontu nebo margin.
Když tam přidáš např. padding{ 3px 2px;} tak ten padding nahoře a dole se sečte a zvýší se o to input. (v uvedeném případě o 6px). Zkus tomu přidělit nulové hodnoty a uvidíš.


PS: Jak už tady řekl matinK, line-height a height jsou zcela dvě rozdílné věci! Oba prvky musíš mít přes height. Line-height je pro usazení písma uvnitř.
martinK
Profil
line-height ti říká, jak budou od sebe vzdálené jednotlivé řádky textu v nějakém bloku, ty do textového pole asi nebudeš psát nic na dva řádky a do buttonu asi také ne.

height - říká, jak vysoký má být prvek, je to uplně jiný parametr.

ve tvém případě:

<!doctype html>
 
<style>
.pole {
width: 100px;
border: none;
background: #888888;
color: #ffffff;
line: 18px;
margin: 0;
padding: 0;
}
.button {
width: 100px;
border: none;
height:18px;
margin: 0;
padding: 0;
}
</style>
 
<form>
<input type="text" name="neco" value="@" class="pole">
<button type="submit" class="button">Odeslat</button>
</form>

a máš je stejně veké. Popřípadě si je zvětší či zmenši. A kolemjdoucí má pravdu s tím paddingem. Margin by toto dělat neměl, ale padding je na to pes
Str4wberry
Profil
Stylování formulářových políček a tlačítek
xlifer
Profil
Str4wberry:
Stylování formulářových políček a tlačítek
Super, díky. Takže to není tak jednoduchý jak to vypadá, udělat vše pěkně zarovnaný a ještě aby to fungovalo napříč prohlížeči...
Str4wberry
Profil
Je to tak.
xlifer
Profil
Str4wberry:
Je to tak.
Uvažuji, zda se raději formátování pole formulářů nevzdát... ale když to zase vypadá hezky. Jaký na to máte nároz z vaší praxe?
martinK
Profil
xlifer:
formátovat, ale ty v tom vidíš až moc velký zádrhel, vždyť je to uplně stejně jako cokoliv jiného, chce to jen praxi.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: