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

Question

现场直播。

我在设计联系表格时遇到了一个小问题。我希望消息字段和提交按钮位于所有其他输入字段的右侧，沿顶部对齐。当我使用clear:bothandfloat: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>元素， oneleft floated和 second right。 你基本上

需要财产。float

基本示例：

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

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

工作示例。

Answer 2

像这样写：

HTML

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

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

<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>

CSS

.contact_message,
.contact_message + p{
   float: right;
}

.contact_name,
.contact_email,
.contact_subject {
   float: left;
}

Answer 3

您必须将浮动元素放在静态元素之前，以以相同的起始长度显示它们:)

所以在你的情况下，就像这样：

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

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

<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>