我使用 HTML 制作了一个表单,其中两列用于输入字段,然后是一个“页脚”行,其中包含表单提交按钮和其他文本。
它的基本形式看起来像这样,
_______________________________
| |
| Input 1 Input 2 |
| |
| Input 3 Input 3 |
| |
| Submit Text |
|_______________________________|
但是,我不想将提交按钮和文本浮动到右侧,但它破坏了我的布局:/
<div id="form-wrapper">
<form id="contact_form" method="post" action="url/to/your/server/here">
<!-- FIRST float left -->
<div class="float-left c1">
<ul>
<li>
<label for="name" id="name" >Name<span class="required"> *</span></label>
<input type="text" name="name" placeholder="John Doe" autocomplete="off" required>
</li>
<li>
<label for="telephone" id="telephone" >Contact Number<span class="required"> *</span></label>
<input type="tel" name="telephone" placeholder="(01225) 123456" autocomplete="off" required>
</li>
<li>
<label for="email" id="email">Email:</label>
<input type="email" name="email address" placeholder="example@example.com">
</li>
</u>
</div>
<!-- SECOND float left -->
<div class="float-left c2">
<ul>
<li>
<label for="enquiry">Enquiry:</label>
<select id="enquiry" name="enquiry">
<option value="general">General</option>
<option value="sales">Sales</option>
<option value="support">Support</option>
</select>
</li>
<li>
<label for="Message" id="Message" >Message<span class="required"> *</span></label>
<textarea name="message" cols="40" rows="6" required placeholder="Enter your message"></textarea>
</li>
</ul>
</div>
<!-- Clear - notice this is a sibling of the els with floats -->
<div class="form_footer">
<ul>
<li><span id="required_field">* Required fields</span></li>
<li><button class="submit" type="submit">Submit</button></li>
</ul>
</div>
</form>
</div>
a {
outline: none;
}
html, body {
background:url(images/bg.png);
margin: 0;
padding: 0;
height: 100%;
font-family: Helvetica, Arial, sans-serif;
font-size: 0.915em;
line-height: 14px;
}
#form-wrapper {
width: 550px;
display: block;
background: #f6f4f4;
border: #d2cece solid 1px;
}
#required_field {
float: right;
padding: 0 40px 10px 0;
color: #D45252;
font-size: 11px;
font-weight: bold;
font-family: Lucida Sans, Lucida Grande, Lucida Sans Unicode, sans-serif;
}
.required {
color: #D45252;
font-weight: bold;
}
#contact_form ul li {
list-style: none;
position:relative;
}
input, textarea, select {
background:url(images/bg.png);
font-family: Helvetica, Arial, sans-serif;
display: block;
margin: 10px 10px 15px 0px;
resize: none;
-moz-border-radius: 3px;
border-radius: 3px;
}
/* chrome, safari */
::-webkit-input-placeholder {
color:#CCC;
}
/* mozilla */
input:-moz-placeholder, textarea:-moz-placeholder {
color:#CCC;
}
/* ie (faux placeholder) */
input.placeholder-text, textarea.placeholder-text {
color:#CCC;
}
.submit {
font-family: Helvetica, Arial, sans-serif;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.form_footer {
clear: both;
}