当SCSS中有多个并排的div时，Outline不会完全包装div
当SCSS中有多个并排的div时，Outline不会完全包装div
提问于 2018-07-26 05:10:37
我有四个div (选项卡)，我试图向选项卡中添加一个大纲，但大纲并没有包装整个div。我想是标签上的边框造成的。将大纲添加到div的正确方法是什么？代码如下：
HTML：
<div class="main-style">Random</div>
<div class="styling active1">Btn 1</div>
<div class="styling active2">Btn 2</div>
<div class="styling active3">Btn 3</div>CSS：
.main-style,.styling {
background-color: blue;
color: white;
line-height: 36px;
float: left;
padding: 0 20px;
display: inline-block;
&:hover{
cursor: pointer;
}
}
.styling {
border-width: 0px 0px 0px 1px;
border-style: solid;
}
.over {
outline: 3px solid orange;
}JS：
$('.active1').addClass('over'); // the outline doesn't wrap the whole button.
//$('.active3').addClass('over'); the outline wraps the whole button回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-26 05:15:30
它被下一个标签隐藏起来了。将position: relative和z-index: 1添加到.over选项卡中，使其显示在下一个选项卡的上方：
$('.active1').addClass('over'); // the outline doesn't wrap the whole button..main-style,
.styling {
background-color: blue;
color: white;
line-height: 36px;
float: left;
padding: 0 20px;
display: inline-block;
&:hover {
cursor: pointer;
}
}
.styling {
border-width: 0px 0px 0px 1px;
}
.styling:not(:first-child) {
margin-left: 3px;
}
.over {
position: relative;
z-index: 1;
outline: 3px solid orange;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-style">Random</div>
<div class="styling active1">Btn 1</div>
<div class="styling active2">Btn 2</div>
<div class="styling active3">Btn 3</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51527707
复制相关文章
相似问题