100% szerokości minus margines i dopełnienie

Question

Szukałem w okolicy, ale nie mogę znaleźć rozwiązania, które można by zastosować do mojego własnego problemu.

Pracuję nad witryną mobilną i potrzebuję, aby pola wprowadzania były w 100% szerokości ekranu. Ale mam padding-left: 16px i margin: 5px, która sprawia, że ​​pudełka wychodzą poza ekran, więc muszę przewinąć w prawo, aby zobaczyć koniec tego okna. Jak sprawić, by pudełka były w 100% pomniejszone o dopełnienie i margines?

Aby go wypróbować: http://jsfiddle.net/wuSDh/

Answer 1

tracą width:100%; następnie wystarczy użyć jak najwięcej wyściółkę, jak chcesz:

#login_box { 
    padding:10px; 
    margin:50px; 

} 

Demo http://jsfiddle.net/PFm3h/

Wyizolowane efekt:

Demo

Dużo wyściółki, dużo marginesu, bez problemu.

Answer 2

Można dostosować tekstowe szerokość 100% do 95% .Teraz to patrzy dobre

input[type="text"], input[type="password"] { 
    width: 95% !important; 
    margin: 5px !important; 
} 

Zobacz to: http://jsfiddle.net/wuSDh/

Answer 3

Innym rozwiązaniem jest umieszczenie absolutny INPUT i dodać rekwizyty lewo/w prawo:

#login_box { 
    width: 100%; 
    position:relative; 
} 

input[type="text"], input[type="password"] { 
    position:absolute; 
    left:5px; 
    right: 5px 
} 

Konieczne jest dostosowanie marginesów itp., Ponieważ będą one poza względnym przebiegiem układu. Możesz również dodać dopełnienie bez problemów, ponieważ nie ustawiłeś stałej szerokości.

Ta technika jest szeroko obsługiwana we wszystkich przeglądarkach.

Demo: http://jsfiddle.net/wuSDh/3/

Answer 4

Można użyć calc, nowoczesne przeglądarki obsługują go i IE9 +, jak również.

div { 
    position: absolute; 
    height: 20px; 
    width: calc(50% - 10px); 
    padding: 5px; 
} 

Demo

Browser support

Answer 5

elementy poziomie bloku naturalnie wypełnić ich rodziców, jednak jeśli specjalnie ustawić szerokość, by zastąpić ten problem, pozwalając marginesu i obramowanie być dodawany do określona szerokość. Określasz 100% szerokość na ciele, co daje możliwość przepełnienia dokumentu poziomo, jeśli element jest wyprowadzony na jego prawą wewnętrzną krawędź.

Przykład: http://jsfiddle.net/trex005/6earf674/

Prosta lekarstwo to jest zatrzymanie deklarowania szerokość organizmu.Jeśli z jakiegoś powodu jest to wymagane, możesz ustawić margines na 0; Ta sama zasada dotyczy danych wejściowych, ale jest nieco bardziej skomplikowana. Wejścia (tekst/hasło) i obszary tekstowe, nawet jeśli ustawione jako wyświetlanie jako blok, będą wyprowadzać ich szerokości odpowiednio z rozmiaru i kolorów. Można to przesłonić, określając szerokość w CSS, ale mają one również określone granice i marginesy użytkownika, więc problem z przepełnieniem jest znowu dostępny. Aby naprawić to przepełnienie, musisz ustawić ekran wejściowy tak, aby blokował i zmienił rozmiar pudełka: border-box. Ramka obramowania obliczy krawędzie i dopełnienie jako część szerokości.

input[type="text"], input[type="password"] { 
    width: 100% !important; 
    margin: 5px !important; 
    box-sizing:border-box; 
    display:block; 
} 

Po wykonaniu tej czynności zauważysz dodatkowe odstępy między elementami. Dzieje się tak dlatego, że wyświetlanie: blok wymusza podział wiersza, a dodane tagi <br> są zbędne. Usuń je i pracujesz!

Demo:http://jsfiddle.net/trex005/6earf674/1/