对齐与CSS问题的HTML表格

Question

我有一个#main div内的表格，我希望所有的标签在左边，所有的输入区域在右边。

所以我有这些CSS：

.right{ 
    float:right; 
} 

#main{ 
    width:80%; 
} 

textarea{ 
    resize:none; 
} 

和HTML：

<div id="main"> 
    <form name="form1"> 
    <div> 
     <label for="name">Name</label> 
     <input type="text" name="name" class="right"> 
    </div> 
    <div> 
     <label for="description">About you</label> 
     <textarea name="description" class="right"></textarea> 
    </div> 
    <div> 
     <label for="location">Location</label> 
     <input type="text" name="location" class="right"> 
    </div> 
    <input type="submit" value="Submit"> 
    </form> 
</div> 

但textarea的不想去右边，加上投入正在经历的div

这里的jsfiddle： http://jsfiddle.net/malamine_kebe/ZE7tp/

Answer 1

您需要包括float:right到textarea的。

更新办法在这里：http://jsfiddle.net/nbrLJ/

还包括clear:both到div的。

提示 - 你可以针对没有新的类名的表单元素，例如：

div.row input, 
div.row textarea { 
    float:right; 
} 

添加宽度与父容器也将帮助：

#main { 
    width:300px; 
} 

Answer 2

我不是专家，但我认为你需要清除花车

.clearfix { 
clear: both 
} 

http://jsfiddle.net/ZE7tp/2/

Answer 3

你投入运行的相互转化。注意他们正在互相推向左边。设置利润给它一些喘息的空间。

div { 
    margin: 3em 0; 
} 

http://jsfiddle.net/ZE7tp/3/