Question

所以，假设我有一个名称，电子邮件和消息的表单。然而，我的“发送消息”按钮正在破坏并且没有在textarea之后但在textarea和最后一个输入之间对齐！我做错了什么？

我的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;
}

Answer 1

使用clear:both;

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

在http://jsfiddle.net/yzK2k/

上查看

如何安排<button>以便在textarea之后不会中断？</button>

1 个答案: