| Autor | Zpráva | ||
|---|---|---|---|
| hordubal Profil |
#1 · Zasláno: 11. 1. 2014, 18:19:16
Narazil jsem na tuhle podivnost: chci, aby textové pole formuláře <INPUT> bylo stejně široké jako <SELECT>. Udělal jsem si styl se šířkou (width=...) , ale stejně je <SELECT> o fous širší:
<!DOCTYPE HTML>
<html><head><style>
.trida {width: 100px}
</style></head>
<body >
<select class="trida">
<option value="1">Jeden</option><option value="2" >Dva</option><option value="3" >Tři</option>
</select>
<br>
<input class="trida" type="text">
</body>
</html>Zajímavá na tom je skutečnost, že když zruším (nebo změním) deklaraci !DOCTYPE, tak je šířka stejná - předpokládám že browser přejde do quirk modu který se prostě chová jinak. Nicméně chování IE i FireFoxu je v tomto ohledu úplně stejné. Prozatím jsem to řešil tak, že prostě nastavím WIDTH obou prvků jinak, abych měl na obrazovce stejný výsledek. Víte o nějakém lepším řešení? |
||
| Trejpa Profil |
#2 · Zasláno: 11. 1. 2014, 21:54:22
hordubal:
Je to tím, že se k šířce inputu připočítává šířka paddingu a borderu. Když je vynuluješ, bude input stejně široký jako select. To ale asi nechceš. Řešení jsou dvě: 1. Změnit velikost inputu tak, aby bylo počítáno s paddingem a borderem: .trida {width: 100px}
input.trida {
width: 96px;
border-width: 1px;
padding: 1px; }2. Změnit režim výpočtu velikosti z obsahového na okrajový: .trida {
width: 100px;
-moz-box-sizing: border-box;
box-sizing: border-box; } |
||
|
Časová prodleva: 10 let
|
|||
0