如何制作带有徽标的子导航答案

【问题标题】：How to make a Subnav with logo如何制作带有徽标的子导航
【发布时间】：2022-01-05 15:19:08
【问题描述】：

我希望在我的导航栏下创建一个子导航。我正在尝试将我的文本放在右侧的 subnav 中，并将我的徽标放在左侧。但是，我似乎无法让我的文字向右移动。我还想知道如何让我的标志向下移动一点，这样我就可以在线条和标志之间留出一些空间；所以它不是直接在这条线下。谢谢！

body {
    margin:0;
    padding: 0;
    font-family: "Open+Sans", sans-serif;
 }

 .navbar {
    border-bottom: 2px solid #0C133C;
 }
 
 
 #nav {
     background-color: #fff; 
     color: white;
     width: 100%;
 
 }
 .nav {
   float: right;
     text-align: left;
   margin: 0;
 }
 .nav > li {                                                             
     display:Inline-block;
     padding: 20px 50px 10px 9px;                              
 }
 
.nav > li a {                                               
    text-decoration: none;
    color: #0C133C;
    font-size: 18px;
    border-bottom: 3px solid transparent;
}
.clearer {
    clear:both;
}

  
}
.subnav class{
  margin: 0;
position:relative;
}

 .subnav > div a {                                               
     text-decoration: none;
     color: #0C133C;
     font-size: 18px;
padding: 20px 30px 10px 9px;
}

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Navbar</title>
    <link rel="stylesheet" href="styles.css"
    

</head>

<body>

<div class="navbar">
            <ul class="nav">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Get a Quote</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Contact Us</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Sign In</a>
                </li>
            </ul>
            <div class="clearer"></div>
        </div>
        

<subnav class="subnav subnav-light bg-light">
<div class="container-fluid">
<a class="subnav=brand" href="#">
<img src="universallogo.jpg"
 <a class="nav-link active" aria-current="page" href="#">Bonds</a>
</a>
 <a class="nav-link active" aria-current="page" href="#">Report a Claim</a>
 <a class="nav-link active" aria-current="page" href="#">About Us</a>
</div>
</subnav>
 
</ul>




</body>
</html>

【问题讨论】：

标签： html css navbar

【解决方案1】：

您可以尝试这些样式。本质上只是flex 父级并使用justify-content: space-between; 让元素位于右侧和左侧。对于您的徽标，您只需给它一个类并添加一些边距以将其与nav 的底部边框分开。我用虚拟图像替换了您的徽标来演示。

body {
    margin:0;
    padding: 0;
    font-family: "Open+Sans", sans-serif;
 }

 .navbar {
    border-bottom: 2px solid #0C133C;
 }
 
 
 #nav {
     background-color: #fff; 
     color: white;
     width: 100%;
 
 }
 .nav {
   float: right;
     text-align: left;
   margin: 0;
 }
 .nav > li {                                                             
     display:Inline-block;
     padding: 20px 50px 10px 9px;                              
 }
 
.nav > li a {                                               
    text-decoration: none;
    color: #0C133C;
    font-size: 18px;
    border-bottom: 3px solid transparent;
}
.clearer {
    clear:both;
}

  
}
.subnav class{
  margin: 0;
position:relative;
}

 .subnav > div a {                                               
     text-decoration: none;
     color: #0C133C;
     font-size: 18px;
padding: 20px 30px 10px 9px;
}

.logo {
  margin-top: .5rem;
}
.subnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 1rem;
}

<!doctype html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Navbar</title>
      <link rel="stylesheet" href="styles.css"
   </head>
   <body>
      <div class="navbar">
         <ul class="nav">
            <li class="nav-item">
               <a class="nav-link active" aria-current="page" href="#">Get a Quote</a>
            </li>
            <li class="nav-item">
               <a class="nav-link active" aria-current="page" href="#">Contact Us</a>
            </li>
            <li class="nav-item">
               <a class="nav-link active" aria-current="page" href="#">Sign In</a>
            </li>
         </ul>
         <div class="clearer"></div>
      </div>
      <subnav class="subnav subnav-light bg-light">
      <img src="https://dummyimage.com/200x100/000/fff" class="logo"/>
         <div class="container-fluid">
            <a class="subnav=brand" href="#"></a>
            <a class="nav-link active" aria-current="page" href="#">Bonds</a>
            
            <a class="nav-link active" aria-current="page" href="#">Report a Claim</a>
            <a class="nav-link active" aria-current="page" href="#">About Us</a>
         </div>
      </subnav>
   </body>
</html>

【讨论】：

嗨，@nmart 如果这个或任何答案已经解决了您的问题，请考虑通过单击复选标记接受它。这向更广泛的社区表明您已经找到了解决方案，并为回答者和您自己提供了一些声誉。没有义务这样做。但是，社区将来可能不愿意为您提供答案。这个thread 可能会有所帮助。