个人中心
gpt4 book ai didi

html - 使用 flex 在右侧显示 Logo 中心和菜单图标

转载 作者：行者123 更新时间：2023-12-05 01:29:21 25 4
gpt4 key购买 nike

<分区>

如何实现屏幕中心的 Logo 和右侧的菜单图标和文本。我搜索了它并展示了一些 flex 教程，但没有找到实现它的单一方法。

请查看此图片以了解它的外观。

enter image description here 

.logo {
background-color: red;
height: 50px;
width: 50px;

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<nav class="navbar container">
      <div class="logo"></div>
      <div class="navbar-toggle">
        <span>Menu</span>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 6C3 6.55 3.45 7 4 7H20C20.55 7 21 6.55 21 6C21 5.45 20.55 5 20 5H4C3.45 5 3 5.45 3 6Z" fill="#111111"/>
          <path d="M3 12C3 12.55 3.45 13 4 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H4C3.45 11 3 11.45 3 12Z" fill="#111111"/>
          <path d="M3 18C3 18.55 3.45 19 4 19H20C20.55 19 21 18.55 21 18C21 17.45 20.55 17 20 17H4C3.45 17 3 17.45 3 18Z" fill="#111111"/>
          </svg>          
      </div>
    </nav>

我只想用 flex 做这个。不使用额外的空白 div。

谢谢。

25 4 0
文章推荐： elasticsearch 在 helm 中的安装失败并出现 statefulset 错误
文章推荐： stripe-payments - 使用 customer.subscription.update 而不是 invoice.paid 和 invoice.payment_failed 事件 webhooks 来处理 Stripe 订阅
文章推荐： python - 在 VS Code 中使用 Selenium 时无法解析导入 "webdriver_manager.chrome"
文章推荐： adblock - 使用 uBlock Origin 从 中动态删除类