0
私の入力ボックスをラベル（担当者セットと重量）の隣に入れようとしていますが、それは次の行に強制され続けます...どうすればそれらを同じ行に強制することができますか？私はインラインブロックを入力CSSの書式設定で使用し、インラインブロックをラベルcssに入れてみましたが、それでもまだ次の行にとどまっています。これをどうすれば解決できますか？入力ボックスが別の行に強制されるのはなぜですか？
* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; }
html { width: 100%; height:100%; overflow:scroll;
background: url("gym.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
width: 100%;
height:100%;
font-family: 'Open Sans', sans-serif;
}
.login {
position: absolute;
top: 43%; /* Form is 45% from top */
left: 50%; /* Form is 50% across screen*/
margin: -150px 0 0 -150px; /* Position of form on screen */
width:300px; /* width of form */
height:300px; /* height of form */
border: 5px;
}
h1 {
color: #fff;
text-shadow: 2px 2px 4px #000000;
letter-spacing:1px;
text-align:center;
margin-bottom: 15px; /* Space below title */
}
h2 {
color: #fff;
text-shadow: 2px 2px 4px #000000;
letter-spacing:1px;
text-align:center;
margin-bottom: 15px; /* Space below title */
}
h3 {
color: #fff;
text-shadow: 2px 2px 4px #000000;
letter-spacing:1px;
text-align:center;
margin-bottom: 15px; /* Space below title */
}
h4 {
color: #fff;
text-shadow: 2px 2px 4px #000000;
letter-spacing:1px;
text-align:center;
margin-bottom: 15px; /* Space below title */
}
label {
color: #fff;
text-shadow: 2px 2px 4px #000000;
letter-spacing:2px;
text-align:center;
margin-bottom: 15px; /* Space below title */
}
.login input {
width: 100%; /* 100% of form */
margin-bottom: 10px; /* gap in between each element */
background-color: rgba(0,0,0,0.5); /* background color (opacity 3) of all INPUT elements in login class*/
border: none; /* Border of input elements in login class */
outline: none;
padding: 10px; /* height of each input element in login class*/
font-size: 13px; /* font size */
color: #fff; /* font color */
border: 1px solid rgba(0,0,0,0.2); /* 1 pixel black border of opacity 2 for each input element in login*/
border-radius: 4px; /* can curve the login details elements */
}
.slide input {
width: 10%;
}
.exdisplay input {
width: 75%;
text-align: center;
}
.statdisplay input {
width: 30px;
height: 10px;
text-align: center;
}
.displayExerManual h3 {
display: inline-block;
margin-top: 5px;
}
.displayExerManual input {
width: 10%;
}
/* hiding input box */
#reps{
display: none;
}
#exercheckbox:checked ~ #reps{
display: block;
}
#sets{
display: none;
}
#exercheckbox:checked ~ #sets{
display: block;
}
#weight{
display: none;
}
#exercheckbox:checked ~ #weight{
display: block;
}
HTML：
<body>
<div class="login">
<h1>Gym Planner</h1>
<form method="post" action="storeexercisesauto.php">
<div class="displayExerManual">
<input type="hidden" name="exercheckbox" value=0>
<h3><?php echo $name; ?></h3><input type="checkbox" name="exercheckbox" id="exercheckbox" value="1">
<input type="hidden" name="reps<?php echo $x ?>" value = "0" autocomplete="off" required />
<input type="hidden" name="sets<?php echo $x ?>" value = "0" autocomplete="off" required />
<input type="hidden" name="weight<?php echo $x ?>" value = "0" autocomplete="off" required />
<label id="reps">Reps: </label><input type="text" name="reps<?php echo $x ?>" id="reps">
<h4 id="sets">Sets: </h4><input type="text" name="sets<?php echo $x ?>" id="sets">
<h4 id="weight">Weight: </h4><input type="text" name="weight<?php echo $x ?>" id="weight">
</div>
</form>
</div>
</body>
です：ブロックは、代わりに ''ディスプレイの：インラインブロック; '？ – Justinas