如何在2个div之间的中间添加1行并在div中很好地调整复选框？

Question

我在 2 个 div 之间的中间添加 1 行并在 div 中调整复选框对齐时遇到问题。下面是我的编码：

<style>

  .div1,

  .div2 {

    display: inline-block;

  }

</style>

<div class="div1">

  <div class="col-lg-12">

    <input type="checkbox" name="rm_option" id="rm_option" value="1"><strong> Printing</strong></input>&nbsp;&nbsp;&nbsp;

    <input type="checkbox" name="point_option" id="point_option" value="1"><strong> Matt/Gloss Lam</strong></input>&nbsp;&nbsp;&nbsp;<br>

    <input type="checkbox" name="rm_option" id="rm_option" value="1"><strong> Plate</strong></input>&nbsp;&nbsp;&nbsp;

    <input type="checkbox" name="point_option" id="point_option" value="1"><strong> Spot UV</strong></input>&nbsp;&nbsp;&nbsp;<br>

    <input type="checkbox" name="rm_option" id="rm_option" value="1"><strong> Paper</strong></input>&nbsp;&nbsp;&nbsp;

    <input type="checkbox" name="point_option" id="point_option" value="1"><strong> UV</strong></input>&nbsp;&nbsp;&nbsp;<br>

  </div>

</div>

<div class="div2 pull-right">

  <div class="form-group col-lg-12">

    <label class="control-label col-lg-4">Remark/Instruction:<span style="color:red;">&nbsp;*</span></label><br><br>

    <div class="col-lg-7">

      <textarea class="form-control" id="promotion_description" name="promotion_description" title="" style="margin: 0px -24px 0px 0px; width: 100%; height: 93px;"></textarea>

    </div>

  </div>

</div>

输出显示如下图所示：

输出1

实际上我想要的输出如下示例图片：

输出2

希望有人能指导我解决这些问题。谢谢。

Answer 1

请添加CSS如下：.div1{&nbsp; &nbsp; margin-right: 25px;&nbsp; &nbsp; border-right: 1px solid #000000;}strong {&nbsp; &nbsp; width: 150px;&nbsp; &nbsp; display: inline-block;}

Answer 2

你可以试试这个：<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script><style>&nbsp; .div1,&nbsp; .div2 {&nbsp; &nbsp; display: inline-block;&nbsp; }</style><div class="div1">&nbsp; <div class="row">&nbsp; &nbsp; <div class="col-lg-4">&nbsp; &nbsp; &nbsp; <input type="checkbox" name="rm_option" id="rm_option" value="1"><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Printing</strong></input><br>&nbsp; &nbsp; &nbsp; <input type="checkbox" name="point_option" id="point_option" value="1"><strong> Matt/Gloss&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Lam</strong></input><br>&nbsp; &nbsp; &nbsp; <input type="checkbox" name="rm_option" id="rm_option" value="1"><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Plate</strong></input><br>&nbsp; &nbsp; &nbsp; <input type="checkbox" name="point_option" id="point_option" value="1"><strong> Spot&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; UV</strong></input><br>&nbsp; &nbsp; &nbsp; <input type="checkbox" name="rm_option" id="rm_option" value="1"><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Paper</strong></input><br>&nbsp; &nbsp; &nbsp; <input type="checkbox" name="point_option" id="point_option" value="1"><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; UV</strong></input><br>&nbsp; &nbsp; &nbsp; <input type="checkbox" name="rm_option" id="rm_option" value="1"><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Folding</strong></input><br>&nbsp; &nbsp; &nbsp; <input type="checkbox" name="point_option" id="point_option" value="1"><strong> Machine&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Varnish</strong></input><br>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="col-lg-4">&nbsp; &nbsp; &nbsp; <input type="checkbox" name="rm_option" id="rm_option" value="1"><strong> Perfect/ Lock&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Bind</strong></input><br>&nbsp; &nbsp; &nbsp; <input type="checkbox" name="point_option" id="point_option" value="1"><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Matt/Gloss</strong></input><br>&nbsp; &nbsp; &nbsp; <input type="checkbox" name="rm_option" id="rm_option" value="1"><strong> Staple&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Bind</strong></input><br>&nbsp; &nbsp; &nbsp; <input type="checkbox" name="point_option" id="point_option" value="1"><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Diecut</strong></input><br>&nbsp; &nbsp; &nbsp; <input type="checkbox" name="rm_option" id="rm_option" value="1"><strong> Threat&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Sewing</strong></input><br>&nbsp; &nbsp; &nbsp; <input type="checkbox" name="point_option" id="point_option" value="1"><strong> Creasing&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Line</strong></input><br>&nbsp; &nbsp; &nbsp; <input type="checkbox" name="rm_option" id="rm_option" value="1"><strong> Wire -&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 0</strong></input><br>&nbsp; &nbsp; &nbsp; <input type="checkbox" name="point_option" id="point_option" value="1"><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Gluing</strong></input><br>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="col-lg-4">&nbsp; &nbsp; &nbsp; <label class="control-label">Remark/Instruction:<span style="color:red;">&nbsp;*</span></label><br><br>&nbsp; &nbsp; &nbsp; <textarea class="form-control" id="promotion_description" name="promotion_description" title="" style="margin: 0px -24px 0px 0px; width: 100%; height: 93px;"></textarea>&nbsp; &nbsp; </div>&nbsp; </div></div>

Answer 3

这个怎么样！尝试一下你就会得到想要的结果。&nbsp; &nbsp; &nbsp; * {&nbsp; &nbsp; &nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; &nbsp; &nbsp; margin: 0;&nbsp; &nbsp; &nbsp; &nbsp; padding: 0;&nbsp; &nbsp; &nbsp; }&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; .wrapper {&nbsp; &nbsp; &nbsp; &nbsp; display: flex;&nbsp; &nbsp; &nbsp; &nbsp; padding: 20px 0;&nbsp; &nbsp; &nbsp; }&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; .div1 {&nbsp; &nbsp; &nbsp; &nbsp; display: flex;&nbsp; &nbsp; &nbsp; &nbsp; flex-wrap: wrap;&nbsp; &nbsp; &nbsp; &nbsp; width: 20%;&nbsp; &nbsp; &nbsp; &nbsp; border-right: 1px solid #000;&nbsp; &nbsp; &nbsp; &nbsp; flex: 1 0 auto;&nbsp; &nbsp; &nbsp; &nbsp; padding: 0 15px;&nbsp; &nbsp; &nbsp; }&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; .div1 .chks {&nbsp; &nbsp; &nbsp; &nbsp; display: flex;&nbsp; &nbsp; &nbsp; &nbsp; flex-wrap: wrap;&nbsp; &nbsp; &nbsp; &nbsp; flex-direction: column;&nbsp; &nbsp; &nbsp; &nbsp; width: 50%;&nbsp; &nbsp; &nbsp; }&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; .div1 label {&nbsp; &nbsp; &nbsp; &nbsp; float: left;&nbsp; &nbsp; &nbsp; &nbsp; width: 50%;&nbsp; &nbsp; &nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; &nbsp; &nbsp; padding: 5px 0;&nbsp; &nbsp; &nbsp; }&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; .div2 {&nbsp; &nbsp; &nbsp; &nbsp; flex: 1 0 auto;&nbsp; &nbsp; &nbsp; &nbsp; display: flex;&nbsp; &nbsp; &nbsp; &nbsp; justify-content: flex-end;&nbsp; &nbsp; &nbsp; &nbsp; padding: 0 15px;&nbsp; &nbsp; &nbsp; &nbsp; align-items: center;&nbsp; &nbsp; &nbsp; }&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; .div2 .form-group {&nbsp; &nbsp; &nbsp; &nbsp; width: 40%;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; <div class="wrapper">&nbsp; &nbsp; &nbsp; <div class="div1">&nbsp; &nbsp; &nbsp; &nbsp; <div class="chks">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="rm_option-1"><input type="checkbox" name="rm_option" id="rm_option-1" value="1">Printing</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="rm_option-2"><input type="checkbox" name="rm_option" id="rm_option-2" value="1">Plate</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="rm_option-3"><input type="checkbox" name="rm_option" id="rm_option-3" value="1">Paper</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="rm_option-4"><input type="checkbox" name="rm_option" id="rm_option-4" value="1">Folding</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="rm_option-5"><input type="checkbox" name="rm_option" id="rm_option-5" value="1">Perfect/ Lock&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Bind</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="rm_option-6"><input type="checkbox" name="rm_option" id="rm_option-6" value="1">Staple&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Bind</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="rm_option-7"><input type="checkbox" name="rm_option" id="rm_option-7" value="1">Threat&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Sewing</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="rm_option-8"><input type="checkbox" name="rm_option" id="rm_option-8" value="1">Wire - 0</label>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="chks">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="rm_option-9"><input type="checkbox" name="rm_option" id="rm_option-9" value="1">Matt/Gloss&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Lam</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="rm_option-10"><input type="checkbox" name="rm_option" id="rm_option-10" value="1">Spot UV</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="rm_option-11"><input type="checkbox" name="rm_option" id="rm_option-11" value="1">UV</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="rm_option-12"><input type="checkbox" name="rm_option" id="rm_option-12" value="1">Machine&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Varnish</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="rm_option-13"><input type="checkbox" name="rm_option" id="rm_option-13" value="1">Matt/Gloss</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="rm_option-14"><input type="checkbox" name="rm_option" id="rm_option-14" value="1">Diecut</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="rm_option-15"><input type="checkbox" name="rm_option" id="rm_option-15" value="1">Creasing&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Line</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="rm_option-16"><input type="checkbox" name="rm_option" id="rm_option-16" value="1">Gluing</label>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="div2">&nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group col-lg-12">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="control-label col-lg-4">Remark/Instruction:<span style="color:red;">&nbsp;*</span></label><br><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-lg-7">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <textarea class="form-control" id="promotion_description" name="promotion_description" title=""&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style="margin: 0px -24px 0px 0px; width: 100%; height: 93px;"></textarea>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>

Answer 4

给你一个解决方案.container {&nbsp; display: flex;&nbsp;}.leftContainer {&nbsp; display: inline-flex;&nbsp; width: 50%;&nbsp; border-right: 2px Solid #000;}.inputContainer {&nbsp; display: flex;&nbsp; width: 50%;&nbsp; flex-direction: column;}.rightContainer {&nbsp; display: inline-flex;&nbsp; width: 50%;&nbsp; align-items: flex-end;&nbsp; flex-direction: column;}<div class="container">&nbsp; <div class="leftContainer">&nbsp; &nbsp; <div class="inputContainer">&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" name="rm_option" id="rm_option" value="1"><strong> Printing</strong></input>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" name="point_option" id="point_option" value="1"><strong> Matt/Gloss Lam</strong></input>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" name="rm_option" id="rm_option" value="1"><strong> Plate</strong></input>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" name="point_option" id="point_option" value="1"><strong> Spot UV</strong></input>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" name="rm_option" id="rm_option" value="1"><strong> Paper</strong></input>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" name="point_option" id="point_option" value="1"><strong> UV</strong></input>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" name="rm_option" id="rm_option" value="1"><strong> Folding</strong></input>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" name="point_option" id="point_option" value="1"><strong> Machine Varnish</strong></input>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="inputContainer">&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" name="rm_option" id="rm_option" value="1"><strong> Perfect/ Lock Bind </strong></input>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" name="point_option" id="point_option" value="1"><strong> Matt/Gloss</strong></input>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" name="rm_option" id="rm_option" value="1"><strong> Staple Bind</strong></input>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" name="point_option" id="point_option" value="1"><strong> Diecut</strong></input>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" name="rm_option" id="rm_option" value="1"><strong> Threat Sewing</strong></input>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" name="point_option" id="point_option" value="1"><strong> Creasing Line</strong></input>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" name="rm_option" id="rm_option" value="1"><strong> Wire - 0</strong></input>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" name="point_option" id="point_option" value="1"><strong> Gluing</strong></input>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <div class="rightContainer">&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <label>Remark/Instruction:<span style="color:red;">&nbsp;*</span></label><br><br>&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <textarea class="form-control" id="promotion_description" name="promotion_description" title="" style="margin: 0px -24px 0px 0px; width: 100%; height: 93px;"></textarea>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></div>解决方案无bootstrap.css