Jak wykonać Szerokość elementu: 100% minus padding?
Mam wejście html.
Wejście mA padding: 5px 10px;
chcę, aby było 100% szerokości nadrzędnego div(który jest płynny).
Jednak użycie width: 100%;
powoduje, że wejście jest 100% + 20px
Jak mogę to obejść?
14 answers
box-sizing: border-box
jest to szybki, łatwy sposób na naprawienie:
To będzie działać we wszystkich nowoczesnych przeglądarkach i IE8+.
Oto demo: http://jsfiddle.net/thirtydot/QkmSk/301/
.content {
width: 100%;
box-sizing: border-box;
}
Wersje poprzedzone prefiksem przeglądarki (-webkit-box-sizing
, itd.) nie są potrzebne we współczesnych przeglądarkach.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-06 13:26:53
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.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-04-20 18:36:05
Użyj również wypełnienia w procentach i usuń z szerokości:
padding: 5%; width: 90%;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-03-07 12:00:55
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
iborder
- Dodaj do input negative horizontal
margin
=border-width
+horizontal padding
- Dodaj do wrappera input poziome
padding
równemargin
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 */
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-28 05:54:09
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/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-04-20 18:37:59
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.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-01-15 14:47:07
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
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-03-07 11:58:13
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>
).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-31 22:18:54
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/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-03-07 12:16:25
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.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-15 17:18:46
A co z pakowaniem w Pojemnik? Kontener powinien mieć styl podobny do:
{
width:100%;
border: 10px solid transparent;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-21 14:09:43
Spróbuj tego:
width: 100%;
box-sizing: border-box;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-03 15:55:39
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:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-10-14 22:02:52
Możesz to zrobić:
width: auto;
padding: 20px;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-21 03:15:37