Question

我有一个复选框按钮和一个并排的段落。

它是内联块，一切都很好......看：

当我将视图转换为响应时，它只会下降一行。像这样：如何在CSS中直接克服这个问题，而不是在元素周围启动构建div并在这里引导整个交易？谢谢！

重新编码;那些是2列，按钮和段落都在左栏中。

为编码添加而编辑：

    <div class="row no-pad">
            <div class="col-xs-6 left-hand-input">

                <!--FORM BEGIN-->
                <form class="form-control-static" action="leadGen.php" method="post">
                    <p>PERSONAL DETAILS</p>
                    <hr>
                    <label for="firstName">FIRST NAME:</label><br>
                    <input name="firstName" id="firstName" type="text"><br>
                    <label for="email">EMAIL:</label><br>
                    <input name="email" id="email" type="email">

                    <p>SHIPMENT ADDRESS</p>
                    <hr>
                    <label for="address">ADDRESS:</label><br>
                    <input name="address" id="address" type="text"><br>
                    <label for="country">COUNTRY:</label><br>
                    <input name="country" id="country" type="text"><br>
                    <label for="zip">ZIP CODE:</label><br>
                    <input name="zip" id="zip" type="text"><br>
                    <input type="submit" id="submit" value="SEND">

                    <p style="display: inline-block; vertical-align: -10px;">&nbsp;&nbsp;&nbsp;*Required fields</p><br>
<input checked type="checkbox" id="mailingList"/>
<p style="display: inline-block; font-size: 75%;">&nbsp;&nbsp;&nbsp; 
Receive exclusive membership deals and offers.</p>
                </form>
            </div>

            </div>

Answer 1

您需要使用标签

<label><input type="checkbox" value=" id="mailingList">Receive exclusive membership deals and offers.</label>

以下是jsfiddle演示：https://jsfiddle.net/o4qgu4gv/2/

您还应该考虑使用col-sm-6而不是col-xs-6，因为它在iPhone 4屏幕上看起来不错

Answer 2

如果是复选框或任何输入类型标签，那么更合适的选择是使用label标签而不是段落。

你可以使用带有 for 属性的标签，它应该可以正常工作。

<div id="wrapper">
 <input type="checkbox" id="btn"> check  
  <label for="btn">
     this should not shift
  </label>
</div>

按钮和段落并排，没有反应

2 个答案: