2017-05-16 49 views
0

我有一個小問題讓我的文本與我的文本字段排隊出於某種原因,當我將文本浮動到左側,文本字段正確的一切都變得瘋狂,所以我剛剛離開文本左浮動左在文本字段中沒有任何內容。任何人都可以看到我可能會出錯的地方嗎?問題獲取文本與文本字段對齊?

#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>

+0

你還沒告訴我們你想要* *發生。你剛纔說你想要他們對齊,並且他們「正在瘋狂」。 「對齊」是一個非常普遍的術語。你期望的結果是什麼?這就是說,我認爲你已經在這裏的元素方面有點矯枉過正了......如果頁面上的每個項目沒有深度嵌套,你可能會更容易操縱和定位文本/文本框。 – Santi

回答

0

添加顯示器撓性到的formInput ID並獲得成功,同時刪除其它元素的浮動。您可能需要考慮減少表單內嵌套元素的數量,以避免佈局複雜。

#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%; 
 
    
 
    text-align: right; 
 
    padding-right: 30px; 
 
    color: #555; 
 
} 
 

 
#tb { 
 
    width: 40%; 
 
} 
 

 
#tb input[type=text] { 
 
    width: 100%; 
 
} 
 

 
#cb { 
 
    
 
    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; 
 
} 
 

 
#formInput{ 
 
    display: flex; 
 
    align-items:center; 
 
}
<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>

0

假設你想要的文字是位置文本框的左側。

嘗試設置圍繞輸入和p標籤的div以包含css display:inline-block並刪除浮動塊。

1

您可以更好地使用浮動屬性構建特定於用戶界面的UI。

您必須介意,當完成樣式時,浮動列必須需要clear: both來停止應用到元素中的浮動效果。例如,我已將其設置爲#formInput

我已經將float: left應用於文本框的列並清除了<p>元素的邊距,行垂直空間可以更好地由線元素控制(必須是類,而不是ID ..您可以使用很多通過這種方式)。

希望它有助於另一種方式。

#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; 
 
    clear: both; /* To clear the float influences to the next line */ 
 
} 
 

 
#tbName { 
 
    width: 40%; 
 
    float: left; 
 
    text-align: right; 
 
    padding-right: 30px; 
 
    color: #555; 
 
} 
 

 
#tbName p { 
 
    margin: 0; 
 
} 
 

 
#tb { 
 
    width: 40%; 
 
    float: left /* to fit with the label column */ 
 
} 
 

 
#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>

+1

很好tks很多.. –

+0

不客氣的兄弟 – RPichioli