css - 将消息和提交按钮对齐到其他输入字段的右侧

Question

Live site.

我在设置联系表单样式时遇到了一个小问题。我希望消息字段和提交按钮位于所有其他输入字段的右侧，并沿顶部对齐。当我使用 clear:both 和 float:right 时，消息和提交按钮确实会移动，但它们远低于所有其他字段。 我该如何解决这个问题？

.contact_name {
    font-family: fanwood-webfont;
    margin-left: 60px;
    padding-bottom: 10px;
}

.contact_email {
    font-family: fanwood-webfont;
    margin-left: 60px;
    padding-bottom: 10px;
}

.contact_subject {
    font-family: fanwood-webfont;
    margin-left: 60px;
}

.contact_message {
    clear: both;
    float: right;
    font-family: fanwood-webfont;
}

.contact_button {
    clear: both;
    float: right;
}

&

<p class=contact_name>Name (required)<br />
[text* your-name]</p>

<p class=contact_email>Email (required)<br />
[email* your-email]</p>

<p class=contact_subject>Subject<br />
[text* your-subject]</p>

<p class=contact_message>Message<br />
[textarea* your-message]</p>

<p>[submit class:contact_button "Send"]</p>

Answer 1

我建议您创建两个 <div>元素，一个 left floated第二个right .

你需要float基本上是属性(property)。

基本示例:

​#left {
   width: 150px;
   height: 100px;
   background-color: #eeeeee;
   float: left;
}

​#right {
   width: 150px;
   height: 100px;
   background-color: #eeeeee;
   float: right;
}​

工作 example .