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

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。

此处更新方法:http://jsfiddle.net/nbrLJ/

还要在 div 中包含一个 clear:both。

提示 - 您可以在没有新类名的情况下定位表单元素，例如:

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

为父容器添加宽度也有帮助:

#main {
    width:300px;
}