Textarea ve giriş farklı genişlikler

Question

sahip

CSS:

textarea, input { 
    width:300px; 
} 

HTML:

<textarea id="input"></textarea> 
<br> 
<input type="submit"> 

Canlı Demo: http://codepen.io/qaz/pen/teaiG

Neden farklı genişliklerine sahip giriş ve textarea görülmektedir? Aynı genişlikte yapmak için hangi özellikleri eklemem gerekiyor?

GÜNCELLEME: Kenarlığı ve dolguyu 0px olarak ayarlayarak, bunların aynı genişlikte görüntülenmesini sağlayabilirim. Kimse yastıklama yapmak istemiyor: 0px, ve tuhaf bir şekilde, her ikisi için de 10px olduğunda, artık aynı genişlikte değiller. Şimdi bir dolgu ile bir çözüm buldum: 0px, hala bir açıklama ve hala benim hala bir dolguya sahip olmamı sağlayan bir çözüm ile ilgileniyorum.

(Ben Windows 7 üzerinde Chrome 35 kullanıyorum)

Answer 1

böyle ayarlamayı deneyin:

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

http://jsfiddle.net/QV9PE/

Kutu boyutlandırma CSS3 özelliği bunu yapabilir. Sınır-kutu değeri (içerik kutusu varsayılanının tersine), nihai işlenen kutunun beyan edilen genişliği ve kutunun içinde kesilen herhangi bir kenarlık ve dolgu olmasını sağlar.

Şimdi, piksel tabanlı dolgu ve kenarlık dahil olmak üzere 300 piksel genişliğinde olmak üzere textarea'mızı güvenle ilan edebilir ve düzeni mükemmel bir şekilde tamamlayabiliriz.

Answer 2

aşağıdaki CSS ve HTML deneyin. Ben teorik cevabı bilmiyorum ama burada pratik bir çözümdür: http://codepen.io/anon/pen/BGeci

CSS:

textarea, input { 
    width:300px; 
} 

input[type=submit] { 
    width:306px; 
} 

HTML:

<textarea id="input"></textarea><br> 
<input type="text" id="input2"></textarea><br> 
<input type="submit">