Jak wykonać Szerokość elementu: 100% minus padding?

Dlatego mamy box-sizing w CSS.

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

Niestety starsze przeglądarki takie jak IE7 tego nie obsługują. Jeśli szukasz rozwiązania, które działa w starych IEs, sprawdź inne odpowiedzi.

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

padding: 5%;
width: 90%;

Można to zrobić bez użycia box-sizing i nie klarownych rozwiązań, takich jak width~=99%.

Demo na jsFiddle:

• Zachowaj dane wejściowe padding i border
• Dodaj do input negative horizontal margin = border-width + horizontal padding
• Dodaj do wrappera input poziome padding równe margin z 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 ilość pikseli
By webvitaly (https://stackoverflow.com/users/713523/webvitaly )
Oryginalne źródło: http://web-profile.com.ua/css/dev/css-width-100prc-minus-100px/

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

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

To rozciągnie wewnętrzną część do dowolnej szerokości, która powinna być mniejsza niż 15px po obu stronach.

Możesz wypróbować kilka sztuczek pozycjonowania. Możesz umieścić wejście w div z position: relative i ustaloną wysokością, a następnie na wejściu mieć position: absolute; left: 0; right: 0; i dowolne wypełnienie, które lubisz.

Przykład na żywo

Oto zalecenie z codeontrack.com , który ma dobre przykłady rozwiązań:

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

Przenieś wypełnienie pola wejściowego' do elementu wrappera.

<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; a szerokością:100%; Szerokość: auto; będzie (AUTO)matycznie obliczyć szerokość w celu dopasowania dokładnie podane z div owijania łącznie z wyściółką. Szerokość 100% rozszerza szerokość i dodaje wypełnienie.

A co z pakowaniem w Pojemnik? Kontener powinien mieć styl podobny do:

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

Spróbuj tego:

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

Dla mnie, używając margin:15px;padding:10px 0 15px 23px;width:100%, wynik był taki:

Rozwiązaniem dla mnie było użycie width:auto zamiast width:100%. Mój nowy kod to:

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

Możesz to zrobić:

width: auto;
padding: 20px;