Eu tenho uma entrada html.
A entrada tem padding: 5px 10px;
eu quero que seja 100% da largura da div pai (que é fluido).
No entanto, o uso width: 100%;
faz com que a entrada seja 100% + 20px
como posso contornar isso?
input
e apoiar IE7
Eu tenho uma entrada html.
A entrada tem padding: 5px 10px;
eu quero que seja 100% da largura da div pai (que é fluido).
No entanto, o uso width: 100%;
faz com que a entrada seja 100% + 20px
como posso contornar isso?
input
e apoiar IE7
Respostas:
box-sizing: border-box
é uma maneira rápida e fácil de corrigi-lo:
Isso funcionará em todos os navegadores modernos e no IE8 +.
Aqui está uma demonstração: http://jsfiddle.net/thirtydot/QkmSk/301/
.content {
width: 100%;
box-sizing: border-box;
}
As versões com prefixo do navegador ( -webkit-box-sizing
, etc.) não são necessárias nos navegadores modernos.
É por isso que temos box-sizing
em CSS.
Editei o seu exemplo e agora ele funciona no Safari, Chrome, Firefox e Opera. Confira: http://jsfiddle.net/mathias/Bupr3/ Tudo o que eu adicionei foi este:
input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Infelizmente, navegadores mais antigos como o IE7 não suportam isso. Se você está procurando uma solução que funcione em IEs antigos, confira as outras respostas.
Use o preenchimento também em porcentagens e remova da largura:
estofamento: 5%; largura: 90%;
Você pode fazê-lo sem usar box-sizing
e não soluções claras como width~=99%
.
padding
eborder
margin
= border-width
+horizontal padding
padding
igual a margin
da etapa anteriorMarcação 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 */
}
Use css calc ()
Super simples e incrível.
input {
width: -moz-calc(100% - 15px);
width: -webkit-calc(100% - 15px);
width: calc(100% - 15px);
}
Como visto aqui: Largura da div 100% menos quantidade fixa de pixels
Por webvitaly ( https://stackoverflow.com/users/713523/webvitaly )
Fonte original: http://web-profile.com.ua/css/dev/css -width-100prc-menos-100px /
Apenas copiei isso aqui, porque eu quase perdi no outro segmento.
Supondo que eu esteja em um contêiner com preenchimento de 15px, é isso que eu sempre uso para a parte interna:
width:auto;
right:15px;
left:15px;
Isso esticará a parte interna para qualquer largura que seja menor que 15 px em ambos os lados.
width:auto
aplicado a um input
campo?
Você pode tentar alguns truques de posicionamento. Você pode colocar a entrada em uma div com position: relative
uma altura fixa e, em seguida, na entrada have position: absolute; left: 0; right: 0;
e em qualquer preenchimento que desejar.
<input>
elementos no Firefox (idk sobre o IE). Mas funciona com <div>
s. E não, display: block
no <input>
também não funciona: - /
Aqui está a recomendação do codeontrack.com , que tem bons exemplos de soluções:
Em vez de definir a largura da div como 100%, defina-a como automática e verifique se
<div>
está configurada para exibir: block (padrão para<div>
).
Mova o preenchimento da caixa de entrada para um elemento de invólucro.
<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>
Veja o exemplo aqui: http://jsfiddle.net/L7wYD/1/
Apenas entenda a diferença entre width: auto; e largura: 100%; Largura: auto; (AUTO) calculará MATICALMENTE a largura, a fim de ajustar exatamente o dado com a div de empacotamento, incluindo o preenchimento. Largura 100% expande a largura e adiciona o preenchimento.
Que tal envolvê-lo em um recipiente. O shoud do contêiner tem estilo como:
{
width:100%;
border: 10px solid transparent;
}
Tente o seguinte:
width: 100%;
box-sizing: border-box;
Para mim, usando margin:15px;padding:10px 0 15px 23px;width:100%
, o resultado foi este:
A solução para mim foi usar em width:auto
vez de width:100%
. Meu novo código era:
margin:15px;padding:10px 0 15px 23px;width:auto
. Em seguida, o elemento alinhado corretamente:
Eu tive o mesmo problema. Corrija assim:
width: 100%;
box-sizing: border-box;
Você consegue fazer isso:
width: auto;
padding: 20px;