| 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 * |
#4 · Zasláno: 18. 6. 2014, 16:41:00 · Upravil/a: kolemjdoucí
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 |
#5 · Zasláno: 18. 6. 2014, 16:53:42
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 |
#6 · Zasláno: 18. 6. 2014, 17:04:33
|
||
| 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 |
#8 · Zasláno: 19. 6. 2014, 01:37:36
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 |
#10 · Zasláno: 19. 6. 2014, 12:28:54
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. |
||
|
Časová prodleva: 10 let
|
|||
0