Question

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

我很难容纳这些元素。

我已经尝试过使用显示属性，但是我做错了。

    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>

Answer 1

我在导航栏中水平使用了两个徽标。希望这会有所帮助。

<!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>

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

1 个答案: