Question

我试图将复选框放在与其标签相同的行上，但是它们会继续强行进入下一行？我在div＆＃34; slide＆＃34;中使用了inline-block属性。并根据应该工作的其他堆栈溢出帖子，但它不适合我...？

感谢您的帮助

＆＃13;

* { -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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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;
}

Answer 2

<h4>是一个块级元素，这意味着它将占用整行。您可以将display: inline或display: inline-block添加到h4，但我强烈建议您使用<label>代替<h4>。

为什么我的复选框被强行换成新行？

2 个答案: