Question

我遇到以下问题：我试图显示一个箭头，如果我删除了溢出，它会起作用：隐藏在#colorSelect中。但我需要溢出：隐藏＆＃39;因为我内部有流动元素。

我该如何解决这个问题？如何显示箭头（：元素后）并同时保持溢出？谢谢。

#colorSelect {
width: 70%;
background: #3B3A3A;
border-radius: 5px;
clear: both;
margin: 30px auto 0;
padding: 20px;
position: relative;
color: #fff;
font-size: .8em;
overflow: hidden;
border: 1px solid rgba(150,150,150,0.00);
box-shadow: 0px 0px 22px 10px rgba(0,0,0,0.50); 
/*display:none;*/
}

#colorSelect:after {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #3B3A3A;
border-width: 10px;
margin-left: -10px;       
}

Answer 1

您可以使用:before显示箭头，:after可以清除Float，如下所示

#colorSelect {
width: 70%;
background: #3B3A3A;
border-radius: 5px;
clear: both;
margin: 30px auto 0;
padding: 20px;
position: relative;
color: #fff;
font-size: .8em;
border: 1px solid rgba(150,150,150,0.00);
box-shadow: 0px 0px 22px 10px rgba(0,0,0,0.50); 
/*display:none;*/
}

#colorSelect:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #3B3A3A;
border-width: 10px;
margin-left: -10px;       
}

#colorSelect:after{
    content:"";
    display:block;
    clear:both;
}

CSS3：如果他的父母有溢出就消失了：隐藏;

1 个答案: