<分区>
html - CSS 和表单问题 - 给我带来冲突 :(
我创建了一个表单，它应该看起来像这样:
有人可以帮我编辑我的代码，使其看起来像上图并解释我做错了什么吗？ JSFiddle 会很棒，这样我就可以了解如何修复它。
需要调出 zip 标签和字段并将提交按钮推到右侧，但它对我不起作用:(
我的尝试如下:
CSS:
#form-container {
width: 710px;
height: 450px;
padding: 20px 50px;
margin: 35px 0 0 25px;
}
form {
position: relative;
margin-left: -10px;
}
form label {
display: block;
font: normal 12px/16px arial, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #000;
text-transform: uppercase;
text-align: left;
}
form [type="text"],
form [type="email"] {
display: block;
border: 1px solid #000;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font: 12px/14px arial, helvetica, verdana, sans-serif;
width: 60%;
padding: 5px 5px;
margin: 5px 0;
-webkit-appearance: none;
}
.zip {
display: block;
border: 1px solid #000;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font: 12px/14px arial, helvetica, verdana, sans-serif;
width: 20%;
padding: 5px 5px;
margin: 5px 0;
-webkit-appearance: none;
}
.dob-select {
display: block;
border: 1px solid #000;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font: 12px/14px arial, helvetica, verdana, sans-serif;
width: 80px;
height:25px;
-webkit-appearance: none;
overflow: hidden;
background: url("http://s17.postimage.org/4tmf81arf/down_arrow.png") no-repeat right #fff;
float: left;
margin-right: 5px;
}
.dob-select select {
background: transparent;
width: 125px;
height: 25px;
border: none;
padding: 5px 0 0 5px;
color: #cccccc;
}
.left {
float: left;
}
form [type="submit"] {
display: block;
background-image: url("http://findmuck.files.wordpress.com/2012/06/green_submit_button_by_rukiaxichigo15.jpg") no-repeat;
margin: 25px auto;
width: 154px;
height:57px;
border: none;
color: transparent;
font-size: 0;
float: left;
}
form input[type=submit]:hover {
background-image: url("http://findmuck.files.wordpress.com/2012/06/green_submit_button_by_rukiaxichigo15.jpg") no-repeat;
cursor: hand;
cursor: pointer;
}
#FileUpload {
position:relative;
margin-top: -13px;
padding-bottom: 15px;
}
#BrowserVisible {
position: absolute;
top: 0;
left: 0;
z-index: 1;
background:url(images/btn_browse.gif) 100% 0px no-repeat;
height:27px;
width:390px;
cursor: hand;
cursor: pointer;
}
#FileField {
display: block;
margin-right: 85px;
border: 1px solid #000;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font: 12px/14px arial, helvetica, verdana, sans-serif;
color: #777;
width: 300px;
padding: 5px 5px;
-webkit-appearance: none;
}
HTML:
<div id="form-container">
<form>
<fieldset>
<label for="name">Name</label>
<input type="text" name="name">
</fieldset>
<fieldset>
<label for="dob">date of birth</label>
<div class="dob-select">
<select name="dob_day">
<option value="01">01</option>
</select>
</div>
<div class="dob-select">
<select name="dob_month">
<option value="01">Jan</option>
</select>
</div>
<div class="dob-select">
<select name="dob_year">
<option value="2012">2012</option>
</select>
</div>
</fieldset>
<fieldset>
<label for="zip">zip</label>
<input type="text" class="short" name="zip">
</fieldset>
<fieldset>
<label for="email">Email</label>
<input type="email" name="email">
</fieldset>
<fieldset>
<label for="subscribe"><input type="checkbox" class="left"> <p class="left">Tick</p></label>
<input type="submit" name="submit">
</fieldset>
</form>
</div>
最佳答案
编辑 2:
添加
.short{
width: auto !important;
}
到 CSS 以全长绘制 ZIP 字段，如图所示。
编辑:删除 border: 1px solid silver; 当您了解定位的工作原理后，它用于调试目的；)
查看:http://jsfiddle.net/pb6mM/3/
form input[type="submit"]{
position: absolute;
right: 0;
bottom: 0;
}
fieldset{
border: 1px solid silver;
}
.fieldsetDate{
padding-right: 30px;
}
.inlineBlock{
display: inline-block;
}
并添加了
margin-top: 6px;
margin-bottom: 6px;
到 .dob-select { 使其与普通文本字段的高度相同。
HTML:
<div id="form-container">
<form>
<fieldset>
<label for="name">Name</label>
<input type="text" name="name">
</fieldset>
<fieldset class="fieldsetDate inlineBlock">
<label for="dob">date of birth</label>
<div class="dob-select">
<select name="dob_day">
<option value="01">01</option>
</select>
</div>
<div class="dob-select" >
<select name="dob_month">
<option value="01">Jan</option>
</select>
</div>
<div class="dob-select">
<select name="dob_year">
<option value="2012">2012</option>
</select>
</div>
</fieldset>
<fieldset class="inlineBlock">
<label for="zip">zip</label>
<input type="text" class="short" name="zip">
</fieldset>
<fieldset>
<label for="email">Email</label>
<input type="email" name="email">
</fieldset>
<fieldset>
<label for="subscribe"><input type="checkbox" class="left"> <p class="left">Tick</p></label>
<input type="submit" name="submit">
</fieldset>
</form>
</div>
关于html - CSS 和表单问题 - 给我带来冲突 :(，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13065900/