Question

我正在尝试将我的输入框放在我的标签旁边（代表集和重量）但是它继续被强制放到下一行...我怎么能强迫它们到同一条线上？我在输入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>

Answer 1

我猜您需要更改此css以增加登录面板的宽度和文本框的宽度。如果要使用标签内联它，文本框不能是表单的100％。如果你把它100％，那么它需要它的父的全宽

.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:500px; /* width of form */
    height:300px; /* height of form */
    border: 5px;
}

.login input {
    width: 250px;
    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 */
}

Answer 2

由于您使用了<h4></h4>代码而不是<label></label>代码，因此输入框被强制转移到下一行。

更新了您的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">
            <label id="sets">Sets: </label><input type="text" name="sets<?php echo $x ?>" id="sets">
            <label id="weight">Weight: </label><input type="text" name="weight<?php echo $x ?>" id="weight">
        </div>
    </form>

    </div>
  </body>

为什么我的输入框被强制插入另一条线？

2 个答案: