Как мне организовать <button>, чтобы он не ломался после текстовой области? - PullRequest
Новая
       30

Как мне организовать <button>, чтобы он не ломался после текстовой области?

0 голосов
/ 01 апреля 2011

Итак, допустим, у меня есть форма с именем, адресом электронной почты и сообщением. Однако моя кнопка «отправить сообщение» ломается и выравнивается не ПОСЛЕ текстовой области, а между текстовой областью и последним вводом! Что я делаю не так?

Мой фрагмент HTML-формы будет: 

<form class="form-contact">
<div class="labels">
<label for="name">Name:</label><input name="name" type="text" />
<label>Email:</label><input name="name" type="text" />
<label>Message:</label><textarea name="name" type="text"></textarea>
<button>send</button>
</div>
</form>

И мой CSS будет: 

.form-contact { 
    width:100%;
    margin:auto; 
}
label { 
    text-align:right;
    width:300px;
    float:left; 
    font-size:24px; 
    margin-top:27px; }
.labels {
    margin-top:36px;
    float:
}
form { 
    display:inline; 
    margin:0; 
}
input {
    float:left; 
    margin-top:28px; 
    margin-left:27px; 
    height:23px; 
    line-height:23px;
    font-size:23px; 
    color:#01a4c0; 
    width:309px; 
}
textarea { 
    float:left;
    margin-top:28px;
    margin-left:27px;
    height:23px;
    line-height:23px; 
    font-size:23px;
    color:#01a4c0;
    width:309px; 
    height:134px;
}
button {
    width:88px; 
    height:29px; 
    border:none; 
    background:#01a4c0; 
    color:#FFF; 
    font-size:22px; 
    text-align:center;
    float:left; 
    cursor:pointer; 
    margin-top:13px; 
    display: block;
}

1 Ответ

0 голосов
/ 01 апреля 2011

Использование clear:both;

<button style="clear:both">send</button>

Проверьте это на http://jsfiddle.net/yzK2k/

...