input width 100%, margin padding

0

Witam
Chciałbym stworzyć styl w css dla elementu typu <input> tak, aby zajmował 100% dostepnego miejsca, ale posiadał również w środku padding i margines na zewnątrz.
Czyli powinien sam sobie ten rozmiar obliczyć.

Gdy ustawię width:100% i dam padding:7px, to <input> jest zbyt szeroki i wychodzi poza diva w którym się znajduję.

Zrobienie tego za pomocą position:absolute i left right odpada. Czy mam jakieś inne możliwości?

0

Na pewno potrzebujesz ten margines na zewnątrz, czy nie? Bo podajesz przykład z samym dopełnieniem i szerokością. Da się coś takiego zrobić przy pomocy ujemnych marginesów. Musiałbym to jednak sobie sprawdzić na boku, bo z pamięci Ci takich sztuczek wolę nie dyktować. Podaj od razu wartości dopełnień i marginesów.

Trafiłeś na coś, w czym CSS nie jest najlepszy, delikatnie mówiąc. W wersji 3.0 to się zmieni, ale obecnie model pudełkowy jest trochę... niewygodny w takich przypadkach. Jest jednak workaround, wolę go jednak wytłumaczyć na przykładzie.

edit:
OK

  <div class="container">
    <input type="text" value="blabla" name="test"><!-- value zeby bylo widac padding -->
  </div>
.container {
  /* istotne: */
  padding: 0 20px; /* 20 = żądane dopełnienie inputa + obramowanie inputa + margines inputa
                    * (wszystkie wartości tylko dla jednej strony, nie sumarycznie lewa+prawa)
                    */

  /* to juz jest tylko dla testow: */
  width: 400px;
  height: 30px;
  background: #CCC;
}

.container input {
  /* istotne: */
  width: 100%;            /* to zawsze ustawiasz na 100% */
  border: 1px solid #000; /* obramowanie inputa */
  padding: 0 5px;         /* dopelnienie inputa */
  margin: 0 -6px;         /* -6 = -(dopelnienie inputa + obramowanie inputa) */

  /* dla testow: */
  background: #EEE;
}

Ten kod generuje taki elastyczny input, jak chcesz. Daje mu 5-pikselowe dopełnienie, 1-pikselowe obramowanie i 14-pikselowy margines. Generalnie zaczynasz od tego, że wymyślasz sobie, że inputowi dasz dopełnienie na P pikseli, obramowanie na B pikseli i margines po bokach na M pikseli.

Dla inputa, dopełnienie poziome ustawiasz na P, obramowanie na B, a margines poziomy na -1 * (P + B). W elemencie zawierającym musisz zaś ustawić poziome dopełnienie na P + B + M pikseli. Skleciłem to na szybko, ale powinno działać nawet w starym IE.

1 użytkowników online, w tym zalogowanych: 0, gości: 1