Как я могу выровнять два логотипа по горизонтали в навигационной панели? - PullRequest
Новая
       4

Как я могу выровнять два логотипа по горизонтали в навигационной панели?

0 голосов
/ 08 марта 2019

Я использую Materialise 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>

Ответы [ 2 ]

1 голос
/ 08 марта 2019

Вы можете сделать что-то вроде этого: 

.brand-logo > img {
   max-height: 40px;
}

Замените 40px на то, что вам нравится

1 голос
/ 08 марта 2019

Я использовал два логотипа в горизонтальной плоскости в панели навигации. Надеюсь, это поможет. 

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