Formlar (Çok sütunlu)için CSS Izgara Sistemi

SORU

21 Kasım 2009, CUMARTESİ

Formlar (Çok sütunlu)için CSS Izgara Sistemi

İleride burada piksel mükemmel doğrulukta sonuç:

fluid CSS form

CSS kod:

._25 {
    width: 21%;
    display: inline;
    float: left;
    margin-left: 2%;
    margin-right: 2%;
}
._50 {
    width: 46%;
    display: inline;
    float: left;
    margin-left: 2%;
    margin-right: 2%;
}
._75 {
    width: 71%;
    display: inline;
    float: left;
    margin-left: 2%;
    margin-right: 2%;
}
._100 {
    width: 96%;
    display: inline;
    float: left;
    margin-left: 2%;
    margin-right: 2%;
}
label {
    width: 100%;
}
input {
    border: 1px solid #B3B3B3;
    width: 100%;
    -moz-border-radius: 3px;
}
textarea {
    border: 1px solid #B3B3B3;
    width: 100%;
    -moz-border-radius: 3px;
}
select {
    border: 1px solid #B3B3B3;
    width: 100%;
    -moz-border-radius: 3px;
}

Ve bazı örnek HTML kodu:

<div class="_50">
    <p><label for="in_user">Username</label><input id="in_user" type="text" value=""/></p>
</div>

<div class="_50">
    <p><label for="in_pass">Password</label><input id="in_pass" type="text" value=""/></p>
</div>

Son zamanlarda CSS ızgara sistemi kullanmaya başladım ve çok daha basit bir web sayfası tasarımı tüm süreç buluyorum. Şimdi form unsurlarını ama stilize etmeye çalışıyorumGerçekten zor bir zaman sütun formlar yaparak geçiriyorumaşağıdaki örnek alalım:

dıv (genişlik = 400px)
- formu
  - ul
    - li .yarım
      - etiket
      - giriş (200px genişliğinde olmalıdır)
    - li .yarım
      - başka bir etiket
      - başka bir giriş (200px genişliğinde olmalıdır)

Temelde ben uygulamadan bir sınıf olan bir genişlik özniteliği P ama koyarak her iki girişin yan yana yapar satır olması daha büyük 100% (400px) - sanırım bu çünküsınırlar, kenar boşlukları ve doldurma.

mockup of what I'm trying to achieve

Hala öğeler aynı boyutta tüm form yaparken çok sütun için kullanabileceğim herhangi bir CSS grid sistemi vardır(giriş, seçer ve textareas); örn. 1 sütun 1 Giriş 2 sütun her 200px olması gerekirken 400px olmalıdır.

EDİT: Wufoo has some examples ne yapmaya çalışıyorum ama ben çok cahil CSS anlamak tüm kod ve seviniriz eğer birisi olabilir bana bazı işaretçiler.