Verwenden von CSS für ein mehrspaltiges Formular

Question

Vorschläge für den besten Weg, um ein Formular so zu machen? http://i.imgur.com/vT7tC.png

Ich bin mit Tabellen + Eingang mit Breite: 100%, ich weiß, es ist wahrscheinlich nicht der beste Weg, (auch aus irgendeinem Grunde die Eingabebreite: 100% größer wird als [td] oder [div] (die rote Grenze auf diesem Bild ist von einer [div] [Eingabe ...] [/ div])

dank

Answer 1

Sie können das linke Label/Eingänge nach links und rechts Label/Eingang schweben das richtige

Sie müssen eine Breite angeben, andernfalls werden Sie mit einer großen Lücke zwischen Ihren Spalten enden, und Ihre mittlere Spalte wird nicht ausgerichtet w its mit Ihrer großen rechten Eingabe. Diese

ist, wie ich diese Form Code:

HTML

<div class="content"> 
    <div class="row"> 
     <div class="lrow"> 
       <label>aaa aaa</label> 
       <input type="text" class="large"> 
     </div> 
     <div class="rrow"> 
       <label>bbb</label> 
       <input type="text" class="small"> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="lrow"> 
       <label>ccc</label> 
       <input type="text" class="small"> 
     </div> 
     <div class="rrow"> 
       <label>ddd ddd</label> 
       <input type="text" class="large"> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="lrow"> 
       <label>eee</label> 
       <input type="text" class="small"> 
     </div> 
     <div class="rrow"> 
       <label>fff fff</label> 
       <input type="text" class="small"> 
     </div> 
     <div class="crow"> 
       <label>ggg</label> 
       <input type="text" class="small"> 
     </div> 
    </div> 
</div> 

CSS

.content {width:542px;} 
.row {overflow:hidden;margin:5px 0;} 
.row label {float:left;text-align:right;width:60px;margin-right:5px;} 
.row input {float:left;} 
.lrow {float:left;} 
.rrow {float:right} 
.large {width:300px;} 
.small {width:100px;} 

Answer 2

Ihre Zeit nicht durch Spalten von Hand zu machen.

verwenden Sie einfach Blueprint CSS Framework. es ist wirklich schön und einfach zu bedienen und macht den Job so, wie Sie es wollen.

die wichtigste von allen, müssen Sie nicht mehr auf Browser-Kompatibilität mehr kümmern.