我有一個小問題讓我的文本與我的文本字段排隊出於某種原因,當我將文本浮動到左側,文本字段正確的一切都變得瘋狂,所以我剛剛離開文本左浮動左在文本字段中沒有任何內容。任何人都可以看到我可能會出錯的地方嗎?問題獲取文本與文本字段對齊?
#form {
border: 2px solid #e1dfe1;
border-radius: 5px;
background-color: #fff;
width: 60%;
margin-left: 20%;
margin-top: 50px;
font-family: Arial, Helvetica, sans-serif;
}
#formName {
background-color: #f5f0f5;
border-bottom: 2px solid #e1dfe1;
}
#formName p {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
color: #565f65;
font-weight: bold;
}
#formInput {
padding-top: 10px;
padding-bottom: 10px;
}
#tbName {
width: 40%;
float: left;
text-align: right;
padding-right: 30px;
color: #555;
}
#tb {
width: 40%;
}
#tb input[type=text] {
width: 100%;
}
#cb {
float: left;
padding-left: 40%;
padding-right: 5px;
}
#cbName {
color: #555;
}
#submitBtn {
padding-left: 40%;
}
.btn {
width: 100px;
height: 30px;
background-color: #2f8fcb;
color: #fff;
font-weight: bold;
border: 2px solid #2f8fcb;
border-radius: 3px;
}
<form action="Register.php" method="post">
<div id="form">
<div id="formName" }>
<p>Register</p>
</div>
<div id="formInput">
<div id="tbName">
<p>Username</p>
</div>
<div id="tb">
<input name="Username" type="text">
</div>
</div>
<div id="formInput">
<div id="tbName">
<p>Email</p>
</div>
<div id="tb">
<input name="Username" type="text">
</div>
</div>
<div id="formInput">
<div id="tbName">
<p>Password</p>
</div>
<div id="tb">
<input name="Username" type="text">
</div>
</div>
<div id="formInput">
<div id="tbName">
<p>Confirm Password</p>
</div>
<div id="tb">
<input name="Username" type="text">
</div>
</div>
<div id="formInput">
<div id="cb">
<input name="checkTOS" type="checkbox">
</div>
<div id="cbName">
<p>I Agree The
<font color="#799dba">Terms Of Services</font>
</p>
</div>
</div>
<div id="formInput">
<div id="submitBtn">
<input name="submit" type="submit" class="btn" value="REGISTER">
</div>
</div>
</div>
</form>
你還沒告訴我們你想要* *發生。你剛纔說你想要他們對齊,並且他們「正在瘋狂」。 「對齊」是一個非常普遍的術語。你期望的結果是什麼?這就是說,我認爲你已經在這裏的元素方面有點矯枉過正了......如果頁面上的每個項目沒有深度嵌套,你可能會更容易操縱和定位文本/文本框。 – Santi