如何在添加边框底部时覆盖父母填充答案

【问题标题】：How to override the parents padding while adding a border bottom如何在添加边框底部时覆盖父母填充
【发布时间】：2020-09-16 02:21:47
【问题描述】：

我正在构建一个下拉列表，以便在第一个选项下方有一行，例如：

这就是我的 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>

现在我尝试在带有字段类的 div 上添加一个border-bottom: 1px 纯黑色，例如：即每个 optios。

但是由于父级添加了填充，因此无法匹配完整的宽度。我怎样才能覆盖它

【问题讨论】：

"无法匹配全宽"
由于填充，它只达到盒子的宽度，最后有填充。我的意思是线路没有到达两端
填充的两端？我不明白。
@leo 也请添加您的 CSS 代码
@leo 这能回答你的问题吗？ How do negative margins in CSS work

标签： javascript html css

【解决方案1】：

我认为您可以做的是为您的子组件添加一个负边距，如下所示，但将 px === 设置为父组件的填充，然后填充您的子组件以将其内容调整到所需位置。

 .parent{
   padding: 25px;
 }

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

【讨论】：

【解决方案2】：

假设父母的填充是像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>

【讨论】：

【解决方案3】：

您可以对孩子使用负边距。

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>

【讨论】：