Question

我获得了一项家庭作业，重新创建了一个他Here.

的网站

我让它看起来几乎相似，但似乎无法找到如何获得radio bubbles to the right of the checkbox items.

我做了一些研究并试过了verticle-align但是还没有成功。

这是我的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; 

}

任何帮助都会很棒。

Answer 1

这里试试这个小提琴 http://jsfiddle.net/Lsh3rqLj/3/

我只是将复选框包装在div中并将复选框和radiobuttons div的浮动设置为左。

#radioButtons{
vertical-align: middle; 
    float: left;
}

#first{

    float:left;
}

漂浮物就是你需要的。你可以玩更多它来获得完美的定位。

编辑：如果你想完全按照你的作业指示添加padding-top：10px;到你的复选框。我已经更新了小提琴，为你提供了你在发布的img中看到的确切效果。

Answer 2

您可以通过在复选框周围添加<input type="radio">元素然后浮动复选框和左侧的无线电元素来使div元素正确对齐。您还应该在复选框中添加填充以保持一致性。

HTML：

<div id="checkboxes"> <!-- add this div -->
  <input type="checkbox" name="Delivery" id="Delivery" value="yes" /> Delivery<br>
  <input type="checkbox" name="Confirmation" id="Confirmation" value="yes" />Confirmation<br>
</div>

CSS：

#checkboxes {
  float: left;
  padding-top: 10px;
}

#radioButtons {
  float: left;
}

<强> Try it Online!

Answer 3

<!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="">
            </label></fieldset>
            <fieldset style="
">
                <legend>Service Information</legend>
                <div id="checkBox"><input type="checkbox" name="Delivery" id="Delivery" value="yes"> Delivery<br>
                <input type="checkbox" name="Confirmation" id="Confirmation" value="yes">Confirmation<br>
                </div>
                <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>

#container{
	background-color: #C0C0C0;
	border: 2px solid black; 
	width: 500px; 
	margin: auto; 
}
form{
    padding: 4px; 
}
#radioButtons{
    float:left;
	}
#checkBox{
	float:left;
}

请记住，始终使用div标签包装内容。所以你不会遇到这样的问题。

这是工作演示：Working Demo

用div标签包装复选框，稍后为div id

给左浮动

我跳这会对你有所帮助......

试图让单选按钮在html / css中正确对齐

3 个答案: