我被布置了一个家庭作业来重新创建一个他创建的Here.
我已经让它看起来几乎相似,但似乎无法找到如何获得radio bubbles to the right of the checkbox items.
我做了一些研究,并尝试垂直校准,但这还没有解决。
这是我拥有的HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Form Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<h1>Client Registration</h1>
<form>
<fieldset>
<legend>Identity Information</legend>
<label>Corporate Name: <input type= "text" name="corpName" id="corpName" size="40" /></label><br><br>
<label>Address: <input type="text" name="address" id="address" size="40" /></label><br><br>
<label>Contact Name: <input type="text" name="cname" id="cname" size="40" /></label><br><br>
<label>Contact Phone: <input type="text" name="cphone" id="cphone" size="15" /></label> <label>Contact Email: <input type="text" name="cemail" id="cemail" size="15"</label>
</fieldset>
<fieldset>
<legend>Service Information</legend>
<input type="checkbox" name="Delivery" id="Delivery" value="yes" /> Delivery<br>
<input type="checkbox" name="Confirmation" id="Confirmation" value="yes" />Confirmation<br>
<div id="radioButtons">
<input type="radio" name="paymentType" id="creditAccount" value="creditAccount" />Credit Account<br>
<input type="radio" name="paymentType" id="Invoice" value="Invoice" />Invoice<br>
<input type="radio" name="paymentType" id="cod" value="cod" />Cash On Delivery<br>
</div>
</fieldset>
Comments: <br>
<textarea name="comments" id="comments" rows="3" cols="55">Please submit any comments here</textarea><br>
<input type="submit" value="Send Form" /> <input type="reset" />
<br>
<form>
</div>
</body>
这是我的CSS:
/*CSS Document*/
#container{
background-color: #C0C0C0;
border: 2px solid black;
width: 500px;
margin: auto;
}
form{
padding: 4px;
}
#radioButtons{
vertical-align: middle;
}
任何帮助都很好。
最佳答案
来试试这个小提琴
http://jsfiddle.net/Lsh3rqLj/3/
我只是将复选框包装在div中,并将复选框和单选按钮div的float设置为left。
#radioButtons{
vertical-align: middle;
float: left;
}
#first{
float:left;
}
你需要的是浮子。你可以玩它更多,以获得一个完美的定位。
编辑:如果你想让它与作业中的指导完全一样,请在复选框中添加padding top:10px。我已经更新了小提琴给你的确切效果,你会看到在你张贴的img。