图标汉堡栏只显示一行答案

【问题标题】：Icon burger bar only displaying one line图标汉堡栏只显示一行
【发布时间】：2021-12-04 03:53:49
【问题描述】：

我使用的 Elementor 模板只显示汉堡菜单的一行而不是三行。

我已经尝试过一两件事（例如伪框阴影），但它不起作用。

有人可以帮助我吗？我真的很绝望，我有一个截止日期，不知道我能不能完成。

提前非常感谢！！！

html 和 CSS 是：

.mean-container .mean-bar {
    box-sizing: content-box;
    float: left;
    width: 100%;
    position: relative;
    background: #0c1923;
    padding: 4px 0;
    min-height: 42px;
    z-index: 999999;
}
.mean-container a.meanmenu-reveal {
    width: 22px;
    height: 22px;
    padding: 13px 13px 11px 13px;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    text-decoration: none;
    font-size: 16px;
    text-indent: -9999em;
    line-height: 22px;
    font-size: 1px;
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
}
.mean-container a.meanmenu-reveal span {
    display: block;
    background: #fff;
    height: 3px;
    margin-top: 3px;
}

<div class="mean-bar">
    <a href="#nav" class="meanmenu-reveal" style="right: 0px; left: auto; text-align: center; text-indent: 0px; font-size: 18px;"><span><span><span></span></span></span></a>
    <nav class="mean-nav">

【问题讨论】：

标签： css menu elementor

【解决方案1】：

您的代码中的问题是您创建了嵌套跨度，因此输出仅显示一行。

body{
background:#000;
}
.mean-container .mean-bar {
    box-sizing: content-box;
    float: left;
    width: 100%;
    position: relative;
    background: #0c1923;
    padding: 4px 0;
    min-height: 42px;
    z-index: 999999;
}
.mean-container a.meanmenu-reveal {
    width: 22px;
    height: 22px;
    padding: 13px 13px 11px 13px;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    text-decoration: none;
    font-size: 16px;
    text-indent: -9999em;
    line-height: 22px;
    font-size: 1px;
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
}
.meanmenu-reveal span {
    display: block;
    background: #fff;
    height: 3px;
    width:15px;
    margin-top: 3px;
}

<div class="mean-bar">
    <a href="#nav" class="meanmenu-reveal" style="right: 0px; left: auto; text-align: center; text-indent: 0px; font-size: 18px;"><span></span><span></span><span></span></a>
    <nav class="mean-nav">

【讨论】：

非常感谢您回答 Lazy 先生。将尝试它的数量。
很遗憾没有成功。
先生。懒惰的。它终于帮助了我。正如您指出的问题，我能够更好地“攻击”它。还没解决，我会继续努力的。
非常感谢您的宝贵时间。
@PatPadilla 它在我的 sn-p 中运行正常。但正如您所说，它不适用于您的代码。所以请在评论中粘贴您的代码的 Jsfiddle 链接。