我一直試圖讓標簽位于文本輸入上方的左側，但我設法做的只是將其移向中心。我究竟做錯了什么？對不起，如果我標記事物的方式看起來很奇怪，我對 HTML 和 CSS 仍然很陌生。
我想要的輸出
我得到的輸出
HTML
<div class="account-form">
<form action="/account-sign-up">
<div>
<label for="first">First Name</label>
<input
id="first"
type="text"
placeholder="e.g. Wan"
name="first"
required
/>
</div>
<div>
<label for="last">Last Name</label>
<input
id="last"
type="text"
placeholder="e.g. Aiman"
name="last"
required
/>
</div>
<div>
<label for="email">Email</label>
<input
id="email"
type="email"
placeholder="e.g. [email protected]"
name="email"
required
/>
</div>
<div>
<label for="password">Password</label>
<input
id="password"
type="password"
placeholder="Must be 9-20 characters"
name="password"
minlength="9"
maxlength="20"
required
/>
</div>
<input type="submit" value="Sign in" />
<div id="account-extra">
Already have an account?
<a href="sign-in.html" id="account-link">Sign In</a>
</div>
</form>
</div>
CSS
.account-form {
margin-top: 55px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
label {
color: white;
display: block;
margin-top: 30px;
font-family: "Epilogue", sans-serif;
font-weight: 600;
font-size: 20px;
}
input {
display: block;
width: 550px;
margin: 0 auto;
background-color: #f0f3ff;
color: #666666;
padding: 15px;
border-radius: 10px;
border: 2px solid transparent;
outline: none;
font-size: 15px;
cursor: pointer;
transition: all 0.5s;
}
input:hover {
background-color: white;
}
input:focus {
cursor: text;
color: #303030;
background-color: white;
border-color: #303030;
}
input[type="submit"] {
display: block;
color: white;
background-color: black;
font-family: "Epilogue", sans-serif;
font-size: 15px;
font-weight: 600;
margin-top: 40px;
}
input[type="submit"]:hover {
color: black;
background-color: #f0f3ff;
}
#account-extra {
font-family: "Epilogue", sans-serif;
color: white;
margin-top: 30px;
}
#account-extra a {
color: white;
text-decoration: none;
font-weight: 900;
}
uj5u.com熱心網友回復：
使父 div 寬度與您的<input>寬度相同，以便您可以margin:auto用來居中 div。最后你可以使用text-align: left如下所示
.account-form{
text-align: left;
margin: auto;
width: 550px;
}
注意：默認情況下它需要text-align: left. 我剛剛提到因為你用過text-align: center
uj5u.com熱心網友回復：
您可以為標簽添加這段代碼
label {
color: black;
text-align:left;
display: block;
margin-top: 30px;
font-family: "Epilogue", sans-serif;
font-weight: 600;
font-size: 20px;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/360414.html
上一篇：OpenFileDialog在顯示瀏覽對話框之前拋出System.IO.FileNotFoundException