Question

我有一个奇怪的问题，即汉堡菜单行的高度彼此不同。尽管中间的属性相同，但中间的顶部和底部却有所不同。

 .hamburger{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 60px;
    height: 60px;
    padding: 1rem;
    border: 1px solid black;    
    display: flex;
    justify-content: center;
    align-items: center;
    }

    /* Mid hamburger line*/
    .hamburger > div{
        position: relative;
        width: 100%;
        height: 2px;
        background-color: black;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Top bot line*/
    
    .hamburger > div:before,
    .hamburger > div:after{
        content: '';
        position: absolute;
        z-index: 1;
        top: -10px;
        width: 100%;
        height: 2px;
        background: inherit;
    }
    
    /* moves line down */
    
    .hamburger > div::after{
        top: 10px;
    }

<div class="hamburger"><div></div></div>

Hamburger Image

Answer 1

请使用正确的方法制作汉堡包。 CSS：-

.hamburger {border: 1px solid #000; display: inline-block;padding:6px;}
.hamburger div {height:2px; background:#000; width:24px; margin: 3px;}

HTML：-

    <button class="hamburger">
  <div></div>
  <div></div>
  <div></div>
</button>

Answer 2

if (CHARACTER == keyValue)
 DO NOTHING
else
 DO SOMETHING WITH CHARACTER

.hamburger{
  border:1px solid #111;
  display: inline-block;
  padding:5px;
  width:50px;
  height:50px;
}
.hamburger div{
  height:3px;
  background:#000;
  margin: 10px;
}

Answer 3

在我的浏览器和您的代码上也可以正常工作。如果所有代码在您的浏览器上都无法正常工作，则似乎浏览器处于缩放模式。请按CTRL + 0键将浏览器模式设置为0％，或者请附上完整的浏览器屏幕截图。

不同高度的汉堡菜单行

3 个答案: