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

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.

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.

bu kontrol : http://www.noupe.com/design/ultimate-guide-to-grid-based-web-design.html

bilmeniz gereken her şey, css apı ve şablonlar vardır

EDİT : here's my final solution with fluid960 css template

And here's a graphical example. Tabii ki, kolayca css düzenleme ile renkleri değiştirebilirsiniz.