时间戳

首页 > 解决方案 > 如何在导航栏中水平对齐两个徽标？

html - 如何在导航栏中水平对齐两个徽标？

问题描述

我正在使用 Materialize Framework，我想在导航栏上放置 2 个徽标，一个接一个。

我在尝试容纳这些元素时遇到了麻烦。

这是密码笔

我尝试过使用显示属性，但我无法正确处理。

    body {
      background-color: gray; 
    }

    .brand-logo {
        
      display: flex;
      flex-wrap: wrap;
    }

    .brand-logo > #logoUnacar,#svgUnacar {
      line-height: 40px;
      text-align: center;
    }
    
        #logoUnacar {
          order: 1;
          width: 12%;
        }
    
    
        #svgUnacar {
          order: 2;
          width: 50%;
        }
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </head>
    <body>
        <nav>
            <div class="nav-wrapper light-blue darken-4">
                <a href="#" class="brand-logo">
                    <img id="svgEscudo" src="https://svgshare.com/i/Bbx.svg">
                    <img id="svgUnacar" src="https://svgshare.com/i/BcX.svg">
                </a>
                <ul id="nav-mobile" class="right hide-on-med-and-down">
                    <li><a href="sass.html">Inicio </a>
                    </li>
                    <li><a href="badges.html">Registrar Proyecto</a>
                    </li>
                </ul>
            </div>
        </nav>
    </body>
    </html>

标签： htmlcssmaterialize

解决方案

我在导航栏中横向使用了两个徽标。希望这可以帮助。

<!DOCTYPE html>
<html lang="en">

<head>
  <title>yo</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>

  <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <!-- Brand/logo -->
    <a class="navbar-brand" href="#">
      <img src="download.png" alt="logo" style="width:40px;">
      <img src="download.png" alt="logo" style="width:40px;">
    </a>

    <!-- Links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link . . </a>
      </li>

    </ul>
  </nav>

  <div class="container-fluid">
    <h1>hey</h1>
    <p>GLHF</p>
  </div>

</body>

</html>

推荐阅读