我试图将复选框放在标签所在的同一行，但它们总是被迫转到下一行？我已经在 div“幻灯片”中使用了 inline-block 属性，并且根据其他应该工作的堆栈溢出帖子，但是它不适合我的..？
谢谢你的帮助
* { -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>最佳答案
h4 通常占 100% 宽度。试试这个:
<span class="label">LABEL</span>
<input type="checkbox" name="exercheckbox" id="exercheckbox">
.label {
font-weight: bold;
color: #fff;
text-shadow: 2px 2px 4px #000000;
letter-spacing:1px;
text-align:center;
margin-bottom: 15px;
}
关于html - 为什么我的复选框被强制换行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40202292/