Как переопределить отступ родителей при добавлении нижней границы

Question

Я создаю раскрывающийся список таким образом, чтобы под первым вариантом была строка, например:

Вот как сейчас выглядит мой HTML:

<div class="wrapper_19d9p2m" >
   <div class="inputWrapper_ioof0g">
      <div class="inputWrapper_5vhtgf-o_O-small_cef76u Input">
         <label class="bodyM_1n94ib9-o_O-label_rospgn-o_O-label-normal_685omm-o_O-iconLabel_13k1ogx" for="input-5"></label>
         <span class="iconInputWrapper_1eva0mx">
            <div class="iconWrapper_1nhktl7">
               <svg aria-label="magnifier" class="icon_n7qd0i" fill="#8796A6" width="14" height="14" data-component-id="Icon">
                  <use xlink:href="#sprite_magnifier"></use>
               </svg>
            </div>
            <input class="input_h63q7t-o_O-bodyM_1n94ib9-o_O-iconInput_1oxe2z4" id="input-5" type="text" maxlength="127" min="" max="" placeholder="Find a Field" value="">
         </span>
      </div>
   </div>
   <div class="fieldsWrapper_19uhklj">
      <div class="fields_180iae2" style="
         ">
         <div class="textContent_1vqpmfj" > Select All multiselect </div>
         <div class="toggle_c87odb-o_O-toggle-small_1y6w94g">
            <label for="toggle-input-0" class="switch_16604cv">
               <input id="toggle-input-0" class="checkbox_1u9fru1" type="checkbox">
               <div class="slider_7rkf1x">
                  <div class="sliderButtonWrapper_mklg5b">
                     <div class="sliderButton_g21oh2-o_O-sliderButton-small_1tb459x"></div>
                  </div>
               </div>
            </label>
         </div>
      </div>
      <div class="fields_180iae2">
         <div class="textContent_1vqpmfj"> No </div>
         <div class="toggle_c87odb-o_O-toggle-small_1y6w94g" data-component-id="Toggle">
            <label for="toggle-input-2" class="switch_16604cv">
               <input id="toggle-input-2" class="checkbox_1u9fru1" type="checkbox">
               <div class="slider_7rkf1x">
                  <div class="sliderButtonWrapper_mklg5b">
                     <div class="sliderButton_g21oh2-o_O-sliderButton-small_1tb459x"></div>
                  </div>
               </div>
            </label>
         </div>
      </div>
   </div>
</div>

Теперь я попытался добавить border-bottom: 1px solid черный в div с классом полей, например: т.е. каждый из opt ios.

Но поскольку родительский элемент добавляет отступ, он не может соответствовать полной ширине. Как я могу отменить это

Answer 1

• 1000 1001 *

 .parent{
   padding: 25px;
 }

.child{
  margin-left: -25px;
  margin-right: -25px;
}

Answer 2

Вы можете использовать отрицательные поля для дочернего элемента.

div {
  color: #aaa;
}

.parent {
  padding: 2rem;
  outline: 1px solid red;
}

.child {
  /* negative margin to negate parent padding */
  margin: 0 -2rem;
  padding: 2rem;
  outline: 1px solid dodgerBlue;
}

<div class="parent">
  .parent
  <div class="child">
    .child
  </div>
</div>

Answer 3

Предполагая, что поля родительского элемента имеют вид padding: 5px 10px;

Добавление margin-left: -10px; margin-right: -10px к дочерним элементам позволит border-bottom занять всю ширину.

parent {
  display: block;
  margin: 15px;
  padding: 5px 10px;
  border: 1px solid grey;
}

child {
  display: block;
  border-bottom: 1px solid blue;
}

.full-width child {
  margin-left: -10px;
  margin-right: -10px;
}

<parent>
  <child>Child - border bottom not taking full width</child>   
</parent>
<parent class="full-width">
  <child>Child - border bottom takes full width</child>   
</parent>