0

ライブサイト。

お問い合わせフォームのスタイリングに小さな問題があります。メッセージ フィールドと送信ボタンを他のすべての入力フィールドの右側に配置し、上部に配置したいと思います。と を使用する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>
4

3 に答える 3

4

1つと2つ目の2つの<div>要素を作成することをお勧めします。 基本的に財産が必要です。left floatedright

float

基本的な例：

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

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

実例。_

于 2012-06-21T13:21:03.647 に答える
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>
于 2012-06-21T13:20:06.213 に答える
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;
}
于 2012-06-21T13:25:21.350 に答える