0
こんにちは、私はhtmlページにラベル、入力フィールド、ドロップボックスを整列させるのに問題があります。ラベルを左に揃えて、隣に入力します。しかし、それはすべての場所とそれを調整することに問題があります。私はこのラベルの整列に問題があります。
に見えるように私のフォームをしたいと思います。しかし、私のページは現在、次のようになります。以下は 
私のHTMLとCSSのコードです：
<!Doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Assignment 3 using Ajax" />
<!-- Title -->
<title>Assignment 3</title>
<!--CSS Styling -->
<link type="text/css" href="style.css" rel="stylesheet" />
<!-- script -->
<script type="text/javascript" src="script.js">
</script>
</head>
<body>
<header><h1> Registration </h1></header>
<form name="myForm" action="#" method="post" onsubmit="return validate()">
<fieldset>
<label for="username">Username: </label>
<input type="text" id="username" name="user" placeholder="Enter username" />
<label for="password">Password: </label>
<input type="password" id="password" name="user_p" />
<progress id="progress" value='0' max="100"></progress><span id="text"></span>
<label for="re_password">Verify Password: </label>
<input type="password" id="re_password" name="user_pass" placeholder="Re-enter password" />
<label for="email">Email: </label>
<input type="email" id="email" name="user_email" placeholder="Enter email" />
<label for="email">Verify Email: </label>
<input type="email" id="email" name="user_email2" />
<label for="question1">Security Question </label>
<select id="question1" name="question1">
<option value="none"> --- Select a question --- </option>
<option value="a">What's your favorite color?</option>
<option value="b">What's the make of your first car?</option>
<option value="c">What's your mother's maiden name?</option>
<option value="d">What city were you born?</option>
<option value="e">What high school did you attend?</option>
</select>
<label for="answer">Security Answer: </label>
<input type="text" name="user_answer1" />
<label for="question2">Security Question </label>
<select id="question2" name="question2">
<option value="none"> --- Select a question --- </option>
<option value="a">What's your favorite color?</option>
<option value="b">What's the make of your first car?</option>
<option value="c">What's your mother's maiden name?</option>
<option value="d">What city were you born?</option>
<option value="e">What high school did you attend?</option>
</select>
<label for="answer2"> Security Answer: </label>
<input type="text" id="answer2" name="user_answer2" />
<label for="mobile">Phone: </label>
<input type="text" id="mobile" name="user_mobile" />
<label for="address">Address: </label>
<textarea id="t1" rows="8" cols="40"name="user_address" style="vertical-align: top;"></textarea>
<label for="interests">Areas you may be interested in, please select one or more: </label>
<textarea id="interests" rows="10" cols="40" name="user_extra" style="vertical-align: top;"></textarea>
<div id="box1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="Red_Apple.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="110" height="40" />
</div>
<div id="box2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="Banana.jpg" draggable="true" ondragstart="drag(event)" id="drag2" width="110" height="40" />
</div>
<div id="box3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</fieldset>
<input type="button" name="submit" value="Register" onclick="return validate()" />
<input type="button" value="Clear" />
</form>
</body>
CSS：
form {
max-width: 750px;
margin-left: 50px;
background: #f4f7f8;
border-radius: 8px;
}
label {
display:block;
text-align: right;
width:145px;
float: left;
padding-top: 5px;
}
input {
display: inline-block;
margin-bottom: 5px;
margin-top: 5px;
margin-left: 20px;
vertical-align: middle;
}
fieldset {
margin-bottom: 30px;
border: none;
}
#box1, #box2 {
float:right;
width: 112px;
height: 42px;
border: 1px solid;
}
div#box3{
width:112px;
height:42px;
border: 1px solid;
}
私は現在、最初の写真のようにラベルと入力を整列する方法の正しい方向に私を導くことができます。
ブートストラップは使用できますか？ – rsabir
@rsabirこのエクササイズのためのブートストラップなしあなたが直面する問題は、「浮動小数点」の仕組みです。現在はラベルに適用するだけで、入力がフローティングされていない間はすべてスタックアップされます。あなたのためのヒント。 –