Jak zrobić szerokość elementu: 100% minus wypełnienie?

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% + 20pxjaki sposób mogę to obejść?

Przykład

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/

.content {
    width: 100%;
    box-sizing: border-box;
}

Wersje z prefiksem przeglądarki ( -webkit-box-sizingitp.) Nie są potrzebne w nowoczesnych przeglądarkach.

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:

input {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

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.

Użyj dopełnienia również w procentach i usuń z szerokości:

wypełnienie: 5%;
szerokość: 90%;

Możesz to zrobić bez użycia box-sizingi niejasnych rozwiązań width~=99%.

Demo na jsFiddle :

• Zachowaj dane wejściowe paddingiborder
• Dodaj do wejściowego ujemnego poziomego margin= border-width+horizontal padding
• Dodaj do otoki wejściowej poziomej paddingrównej marginz poprzedniego kroku

Znaczniki HTML:

<div class="input_wrap">
    <input type="text" />
</div>

CSS:

div {
    padding: 6px 10px; /* equal to negative input's margin for mimic normal `div` box-sizing */
}

input {
    width: 100%; /* force to expand to container's width */ 
    padding: 5px 10px;
    border: none;
    margin: 0 -10px; /* negative margin = border-width + horizontal padding */ 
}

Użyj css calc ()

Super proste i niesamowite.

input {
    width: -moz-calc(100% - 15px);
    width: -webkit-calc(100% - 15px);
    width: calc(100% - 15px);
}​

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.

Zakładając, że jestem w pojemniku z wyściółką 15px, zawsze używam tej części wewnętrznej:

width:auto;
right:15px;
left:15px;

To rozciągnie wewnętrzną część na dowolną szerokość, która powinna być mniejsza o 15 pikseli z każdej strony.

Możesz wypróbować kilka sztuczek pozycjonujących. Możesz umieścić dane wejściowe w div za position: relativepomocą 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

Oto zalecenie codeontrack.com , które zawiera dobre przykłady rozwiązań:

Zamiast ustawiać szerokość div na 100%, ustaw ją na auto i upewnij się, że <div>jest ustawiona na display: block (domyślnie dla <div>).

Przenieś wypełnienie pola wprowadzania do elementu opakowania.

<style>
div.outer{ background: red; padding: 10px; }
div.inner { border: 1px solid #888; padding: 5px 10px; background: white; }
input { width: 100%; border: none }
</style>

<div class="outer">
    <div class="inner">
       <input/>
    </div>
</div>

Zobacz przykład tutaj: http://jsfiddle.net/L7wYD/1/

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.

Co powiesz na zawinięcie go w pojemnik? Kontener powinien mieć styl:

{
    width:100%;
    border: 10px solid transparent;
}

Spróbuj tego:

width: 100%;
box-sizing: border-box;

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:autozamiast width:100%. Mój nowy kod to:

margin:15px;padding:10px 0 15px 23px;width:auto. Następnie element jest odpowiednio wyrównany:

Miałem ten sam problem. Napraw to tak:

width: 100%;
box-sizing: border-box;

Możesz to zrobić:

width: auto;
padding: 20px;