今天在做网页窗口的时候遇到了一些问题,因个人的操作问题使三角不能正常的显示而用!important来使三角正常出现在正确位置上。
下面是我的错误操作代码和网页显示图:
div dl dd :last-child{
height: 34px;
width: 249px;
}
div dl dd span i {
display:inline-block;
width: 0;
height: 0;
border: 4px solid transparent;
border-left-color: black;
}
<div>
<dl>
<dt><img src="../imge/二手车.png" alt=""></dt>
<dd>
<span>小户型</span>
<span>精装两居</span>
<span>小三居</span>
<span>准新房</span>
<span>精装修</span>
<span>南北通透</span>
<span>低总价</span>
<span>带电梯</span>
<span>别墅</span>
<span>全部二手房源<i></i></span>
</dd>
</dl>
</div>
显示图为:
微信截图_20190628201712.png
在这个图片中可以看出三角显示不出来,我当时检查的时候看着好像是高度不够,于是我在这个问题上钻牛角筋了一节课也没有发现问题出现在哪里。。。。
然后我就用了 !important 来解决这个问题:
div dl dd span i {
display:inline-block;
width: 0 !important;
height: 0 !important;
border: 4px solid transparent;
border-left-color: black;
显示图终于正常了。。。。:
微信截图_201906282021593333333.png
后来,我在晚上上自习的时候经过老师的检查,才发现这个问题的所在,,自己打字留下来的小毛病害了自己啊。
正确的代码应该为:
div dl dd span:last-child{
height: 34px;
width: 249px;
}
div dl dd span i {
display:inline-block;
width: 0px;
height: 0px;
border: 4px solid transparent;
border-left-color: black;
}
正确图:微信截图_201906282021593333333.png
哈哈哈,我这个手指啊,总是在敲好代码后自己多摁一下空格。。。。。让我头疼了一节课,唉!我飘逸的头发又要少了好多0.0