如何在添加底部边框时重写父级填充
如何在添加底部边框时重写父级填充
提问于 2020-05-29 00:55:32
我正在构建一个下拉列表，以便在第一个选项下面有一行，如下所示：
下面是我的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。
但是因为父级添加了填充，所以它不能匹配全宽度。我如何覆盖它？
回答 3
Stack Overflow用户
发布于 2020-05-29 01:28:40
我认为您可以做的是添加一个负边距到您的子组件，如下所示，但使px ===到父组件的填充，然后填充您的孩子，以调整其内容到所需的位置。
.parent{
padding: 25px;
}
.child{
margin-left: -25px;
margin-right: -25px;
}
Stack Overflow用户
发布于 2020-05-29 01:20:29
假设父进程的填充地址类似于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>
Stack Overflow用户
发布于 2020-05-29 01:25:25
您可以在子项上使用负边距。
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62070294
复制相关文章
相似问题
腾讯云开发者
