Question

我有一个小问题造型联系表格。我想将消息字段和提交按钮放在所有其他输入字段的右侧，沿顶部对齐。当我使用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财产。

基本示例：

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

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

工作example。

Answer 2

您必须将浮动元素放在静态元素之前，以便在相同的开始长度上显示它们：）

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

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

Answer 3

像这样写：

<强> 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;
}

明确：两个浮动：对不起作用

3 个答案: