맑음 : 양쪽 플로트 : 올바르게 작동하지 않음

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

동일한 처음의 길이를 표시하는 정적들 앞에 떠 요소를 삽입해야합니다 :) 단순히이 같은 귀하의 경우 그래서

:

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

두 개의 <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 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; 
}