0
私はそのラベルと同じ行にチェックボックスを置こうとしていますが、次の行に押し付け続けるのですか？私はdivの "スライド"内のインラインブロックプロパティを使用して、他のスタックオーバーフローポストによると動作するはずですが、それは私のためにdoesnt ..？あなたの助けのためのなぜ私のチェックボックスは新しい行に強制されますか？
おかげ
* { -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;
}
h4 {
color: #fff;
text-shadow: 2px 2px 4px #000000;
letter-spacing:1px;
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%;
}
.slide {
display: inline-block;
}
#reps{
display: none;
}
#exercheckbox:checked ~ #reps{
display: block;
}<body>
<div class="login">
<h1>Gym Planner</h1>
<form method="post" action="storeexercisesauto.php">
<div class="slide">
<h4>LABEL</h4> <input type="checkbox" name="exercheckbox" id="exercheckbox">
<input type="text" name="reps" id="reps">
</div>
<input type="hidden" name="x" value="<?php echo $x ?>">
<center><button type="submit" class="btn">Save</button></center>
</form>
</div>
「