我被布置了一个家庭作业来重新创建一个他创建的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>&nbsp;<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" />&nbsp;<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。

10-07 19:33
查看更多