0
登録フォームを中心に配置しました。また、ラベルを作成して表示ブロックを使用しました。しかし、私の入力ボックスは上部の上に線を表示していません。なぜ私の行クラスの高さを設定していないのに、正しく動作しないのですか？私はそれが自動的に私の行クラスの内容に応じて大きくなるようにします。私の画像を参照してください。入力ボックスのスタイルが正しく機能していません
* {
margin: 0;
padding: 0;
}
body {
width: auto;
font-family: "Gidole", sans-serif;
}
h1{
padding: 15px;
text-align: center;
}
@font-face {
font-family: "Gidole";
src: url(CODE Light.otf);
}
.container {
width: 960px;
height: 600px;
margin-left: auto;
margin-right: auto;
position: relative;
background: red;
top: 50px
}
.row {
width: 320px;
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
color: #191919;
background-color: #F2FFFA; \t
font-family: "Gidole", sans-serif;
padding: 10px 55px 40px; \t
}
label {
max-width:300px;
display: block;
text-align:left;
}
input {
width: 100%;
}
#submit {
display: block;
width: 100%;
padding: 5px 10px 5px 10px;
color: #ffffff;
background-color: #B73737;;
}
select {
width: 100%;
}<div class="container">
<div class="row">
<div class="myForm">
<form action="register.php" method="POST">
<h1> Create an account</h1> <br/>
<?php echo registration_error($errors1); ?>
<label for="">Username</label><input type="text" name="username" size="30" /> <br/><br/>
<label for="">Password</label><input type="password" name="password" size="30"/> <br/><br/>
<label for="">First Name</label><input type="text" name="firstName" size="30" /> <br/><br/>
<label for="">Last Name</label><input type="text" name="lastName" size="30"> <br/><br/>
<label for="">Email address</label><input type="text" name="email" size="30"> <br/><br/>
<label for="">Gender</label><select name="gender" id="gender" >
<option value="male"> Male </option>
<option value="female"> Female </option>
<option value="others"> Others </option>
<option value="others"> Prefer not to say </option>
</select> <br/><br/>
<label for="">Age</label><input type="number" name="age"> <br/><br/>
<div class="center">
<input type="submit" name="submit" value="Register" id="submit">
</div>
</form>
</div>
</div>
</div>
だから、 'border'を設定する必要がありますか？ – Huelfe
なぜ入力ボックスに上の罫線が表示されていないのかを知る必要があります。 – studentAir01
問題を示すjsfiddleを作成します。ブラウザのズームなどがあるかもしれません。 – Huelfe