1
我制作了一个表单,使用带有两列的HTML作为输入字段,然后使用表单提交按钮和其他文本的“页脚”行。2列形式和一个div跨越两个?
,因为它代表看起来像这样的基本形式,
_______________________________
| |
| Input 1 Input 2 |
| |
| Input 3 Input 3 |
| |
| Submit Text |
|_______________________________|
不过,我wan't提交按钮,然后将它漂浮到右边的文本,但它打破了我的布局:/
<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="[email protected]">
</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;
}
您是否尝试过使用CSS input [type =“text”]和input [type =“submit”]来定位您的文本框并提交按钮? – nerdarama
是的。我可以很好地设计它,但将它浮动到我希望它打破布局的位置。 – Keva161
“休息”是什么意思? – nerdarama