Girişler içindeki dolgu, genişliği% 100 keser

Tamam, bir nesneye padding ayarlamanın, açıkça ayarlanmış olsa bile genişliğinin değişmesine neden olduğunu biliyoruz. Bunun arkasındaki mantık tartışılsa da bazı unsurlarda bazı sorunlara neden olur.

Çoğu durumda, yalnızca bir alt öğe eklersiniz ve buna% 100'e ayarlanmış olan yerine dolgu eklersiniz, ancak form girdileri için bu olası bir adım değildir.

Şuna bir göz atın: http://sandman.net/test/formcss.html

İkinci girişin dolgusu, varsayılan ayara çok tercih ettiğim 5px'e ayarlanmış. Ancak maalesef bu,% 100 genişliğe 10 piksel eklemek de dahil olmak üzere girdinin her yönde 10 piksel büyümesini sağlar.

Buradaki sorun, girişin içine bir alt öğe ekleyemem, bu yüzden düzeltemem. Yani soru şu:

Genişliği% 100 tutarken girişin içine dolgu eklemenin bir yolu var mı? Formlar farklı genişlikte ebeveynlerde oluşturulacağı için% 100 olması gerekir, bu yüzden önceden ebeveynin genişliğini bilmiyorum.

CSS3'ü kullanarak , tarayıcının girdinin genişliğini hesaplama şeklini değiştirmek için özellik kutusu boyutlandırmasını kullanabilirsiniz .

  input.input {
    width: 100%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
  }

Bununla ilgili daha fazla bilgiyi buradan okuyabilirsiniz: http://css-tricks.com/box-sizing/

Çapraz tarayıcı ile ne kadar uyumlu olduğunu bilmiyorum (firefox ve safari'de çalışıyor), ancak bu çözümü deneyebilirsiniz:

DIV.formvalue {
padding: 15px;
}
input.input {
margin: -5px;
}

(Sadece değiştirdiğim değerleri gönderdi)

Seçeneklerden biri sarılmasıdır INPUTbir de DIVdolgu olan.

CSS:

div.formvalue {
    background-color: #eee;
    border: 1px solid red;
    padding: 10px;
    margin: 0px;
}

div.paddedInput {
    padding: 5px;
    border: 1px solid black;
    background-color: white;
}

div.paddedInput input {
    border: 0px;
    width: 100%;
}

HTML:

<div class="formvalue">
    <div class="paddedInput"><input type="text" value="Padded!" /></div>
</div>

Sıklıkla unutulanlar calcburada kurtarmaya gelebilir:

input {
  width: calc(100% - 1em);
  padding: 0.5em;
}

Dolgunun öğenin genişliğini artıracağını bildiğimizden, dolguyu genel genişlikten çıkarıyoruz. Tüm büyük tarayıcılar tarafından desteklenir, duyarlıdır ve dağınık sarmalayıcı div'leri gerektirmez.

Buna benzer bir şeyle ilgili bazı sorunlar yaşıyorum. Girişleri% 100 ve küçük bir dolgusu olan tds var. Yaptığım şey, td üzerindeki dolguyu şu şekilde telafi etmekti:

.form td {
    padding-right:8px;
}

.form input, .form textarea {
    border: 1px solid black;
    padding:3px;
    width:100%;
}

girdi / metin alanının kenarlığını ve dolgusunu dahil etmek için 8px dolgu. Bu yardımcı olur umarım!

Belki kenarlık + arka planı çıkarın inputve bunun yerine divkenarlık + arka plan ve genişliğe sahip bir içine alın :% 100 ve input?

İşe yaradığını bulduğum bir çözüm, girdiyi göreceli olarak konumlandırılmış bir üst etiketle kesinlikle konumlandırmaktır.

<p class="full-width-input">
    <input type="text" class="text />
</p>

Stili uygulayın:

p.full-width-input {
    position: relative;
    height: 35px;
}

p.full-width-input input.text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 5px;
}

Dikkat edilmesi gereken tek şey, kesinlikle konumlandırılmış çocukları yüksekliğini genişletmeyeceği için paragraf etiketinin bir yükseklik ayarı gerektirmesidir. Bu, width: 100%onu ana elemanın sol ve sağ taraflarına kilitleyerek ayarlama ihtiyacını ortadan kaldırır .

Dolgunuz için yüzdeler kullanmayı deneyin:

.input { 

  // remove border completely
  border: none;

  // don't forget to use the browser prefixes
  box-shadow: 0 0 0 1px silver;

  // Use PERCENTAGES for at least the horizontal padding
  padding: 5%; 

  // 100% - (2 * 5%)
  width: 90%; 

}

Kutu gölgesini göremeyen eski tarayıcılardaki kullanıcılar için endişeleniyorsanız, girişe yedek olarak ince bir arka plan rengi verin. Bu tür bir şey için piksel kullanıyorsanız, o zaman onları başka bir yerde kullanıyorsunuzdur, bu da birkaç ekstra zorluk yaratabilir, bunlarla karşılaşırsanız bana bildirin.

Bunu önlemek için bildiğim tek şey% 100 - 10 gibi değerler atamaktır. Ancak bazı uyumluluk sorunları var.