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

时间:2012-06-21 13:17:15

标签: css input css-float clear

Live site.

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

3 个答案:

答案 0 :(得分:4)

我建议您创建两个<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

答案 1 :(得分:0)

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

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

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

答案 2 :(得分:0)

像这样写:

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