Question

我正在尝试使用动画菜单按钮创建侧栏。我在网上找到了一个我想象的按钮示例，我正在尝试正确使用它，但似乎无法在我的页面上找到它。为什么构成动画按钮的三个div出现在梯形的右边而不在其中？

＆＃13;

    #trap {
	    position: absolute;
	    left: 0px;
	    top; 0px;
	    height: 38px;
	    width: 40px;
	    border-left: 40px solid black; 
	    border-bottom: 5px solid transparent;
	    border-top: 5px solid transparent;
	    margin-left: 0;
	    transition: 0.5s;
    }

    .container {
        display: inline-block;
        cursor: pointer;
    }

    .bar1, .bar2, .bar3 {
        width: 35px;
        height: 5px;
        background-color: #A4A4A4;
        margin: 6px 0;
        transition: 0.4s;
    }

    .change .bar1 {
        -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
        transform: rotate(-45deg) translate(-9px, 6px) ;
    }

    .change .bar2 {opacity: 0;}

    .change .bar3 {
        -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
        transform: rotate(45deg) translate(-8px, -8px) ;
    }

＆＃13;

    <div id="trap" class="container" onclick="toggleNav(this)">
	    <div class="bar1"></div>
	    <div class="bar2"></div>
	    <div class="bar3"></div>
    </div>

＆＃13;

Answer 1

#trap的{{1}}正在推动border-left向右推进。一种可能的解决方案是使用bar向后移动bar。

更新：ghost元素是由于position:relative元素上同时包含border-width和width而引起的。因为浏览器的默认设置是在宽度计算中不包括边框的宽度，所以两者都被考虑在内。

最简单的解决方案就是将#trap更改为width: 40px，以便边框的宽度定义是唯一使用的，但我首选的情况（在代码段中更新）是更改width:0px属性box-sizing。这会导致border-box属性考虑元素的边框宽度，因此这两个属性不会相互添加。我还必须增加width以防止底部被剪掉。

height

#trap {
	    position: absolute;
	    left: 0px;
	    top; 0px;
	    height: 38px;
	    width: 40px;
      box-sizing: border-box;
	    border-left: 40px solid black; 
	    border-bottom: 5px solid transparent;
	    border-top: 5px solid transparent;
	    margin-left: 0;
	    transition: 0.5s;
    }

    .container {
        display: inline-block;
        cursor: pointer;
    }

    .bar1, .bar2, .bar3 {
        width: 35px;
        height: 5px;
        background-color: #A4A4A4;
        margin: 6px 0;
        transition: 0.4s;
        left:-35px;
        position:relative;
    }

    .change .bar1 {
        -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
        transform: rotate(-45deg) translate(-9px, 6px) ;
    }

    .change .bar2 {opacity: 0;}

    .change .bar3 {
        -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
        transform: rotate(45deg) translate(-8px, -8px) ;
    }

如何在另一个div中正确定位div？

1 个答案: