Mam dane HTML.
Dane wejściowe mają padding: 5px 10px;
być równe 100% szerokości div rodzica (która jest płynna).
Jednak używanie width: 100%;
powoduje, że dane wejściowe są w 100% + 20px
jaki sposób mogę to obejść?
html
css
width
fluid-layout
Hailwood
źródło
źródło
input
i wspiera IE7Odpowiedzi:
box-sizing: border-box
to szybki i łatwy sposób to naprawić:Działa to we wszystkich nowoczesnych przeglądarkach i IE8 +.
Oto demo: http://jsfiddle.net/thirtydot/QkmSk/301/
Wersje z prefiksem przeglądarki (
-webkit-box-sizing
itp.) Nie są potrzebne w nowoczesnych przeglądarkach.źródło
Właśnie dlatego mamy
box-sizing
w CSS.Zredagowałem twój przykład, a teraz działa w Safari, Chrome, Firefox i Opera. Sprawdź to: http://jsfiddle.net/mathias/Bupr3/ Wszystko, co dodałem, to:
Niestety starsze przeglądarki, takie jak IE7, nie obsługują tego. Jeśli szukasz rozwiązania, które działa w starych IE, sprawdź inne odpowiedzi.
źródło
Użyj dopełnienia również w procentach i usuń z szerokości:
źródło
Możesz to zrobić bez użycia
box-sizing
i niejasnych rozwiązańwidth~=99%
.Demo na jsFiddle :
padding
iborder
margin
=border-width
+horizontal padding
padding
równejmargin
z poprzedniego krokuZnaczniki HTML:
CSS:
źródło
Użyj css calc ()
Super proste i niesamowite.
Jak widać tutaj: szerokość Div 100% minus stała liczba pikseli
Webvitaly ( https://stackoverflow.com/users/713523/webvitaly )
Oryginalne źródło: http://web-profile.com.ua/css/dev/css -width-100prc-minus-100px /
Właśnie skopiowałem to tutaj, ponieważ prawie przegapiłem to w innym wątku.
źródło
Zakładając, że jestem w pojemniku z wyściółką 15px, zawsze używam tej części wewnętrznej:
To rozciągnie wewnętrzną część na dowolną szerokość, która powinna być mniejsza o 15 pikseli z każdej strony.
źródło
width:auto
zastosowania doinput
pola?Możesz wypróbować kilka sztuczek pozycjonujących. Możesz umieścić dane wejściowe w div za
position: relative
pomocą stałej wysokości, a następnie na wejściuposition: absolute; left: 0; right: 0;
i dowolne wypełnienie, które ci się podoba.Przykład na żywo
źródło
<input>
elementami w Firefoksie (idk o IE). Działa jednak z<div>
s. I nie,display: block
na<input>
nie działa również: - /Oto zalecenie codeontrack.com , które zawiera dobre przykłady rozwiązań:
źródło
Przenieś wypełnienie pola wprowadzania do elementu opakowania.
Zobacz przykład tutaj: http://jsfiddle.net/L7wYD/1/
źródło
Po prostu zrozum różnicę między szerokością: auto; i szerokość: 100%; Szerokość: auto; (AUTO) MATYCZNIE obliczy szerokość, aby dopasować dokładnie do podanego div owinięcia, w tym wypełnienia. Szerokość 100% powiększa szerokość i dodaje wypełnienie.
źródło
Co powiesz na zawinięcie go w pojemnik? Kontener powinien mieć styl:
źródło
Spróbuj tego:
źródło
Dla mnie przy użyciu
margin:15px;padding:10px 0 15px 23px;width:100%
wynik był następujący:Rozwiązaniem było dla mnie użycie
width:auto
zamiastwidth:100%
. Mój nowy kod to:margin:15px;padding:10px 0 15px 23px;width:auto
. Następnie element jest odpowiednio wyrównany:źródło
Miałem ten sam problem. Napraw to tak:
źródło
Możesz to zrobić:
źródło