html - 将 html 表单与 css 问题对齐

Question

我在 div 中有一个表单#main，我希望所有标签都在左侧，所有输入区域都在右侧。

所以我有这些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/