如何在导航栏的右侧放置徽标？

时间：2020-05-21 05:40:26

标签： html css navigation nav

嗨，我正在设计导航栏。我想在左侧保留应用程序名称，在右侧保留徽标。在徽标之前，我想保留一个下拉菜单。我尝试如下。 

SELECT  TOP (2) ROW_NUMBER() OVER (ORDER BY sum(linetotal) DESC) ,
        ProductID,
        year(h.OrderDate) 'OrderYear'
from    Sales.SalesOrderDetail so
left outer join Sales.SalesOrderHeader h
on  so.SalesOrderID = h.SalesOrderID
group by    year(h.OrderDate), ProductID

.navbar {
    overflow: hidden;
    background-color: #333;
}

    .navbar a {
        float: left;
        font-size: 16px;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

.dropdown {
    float: left;
    overflow: hidden;
}

    .dropdown .dropbtn {
        font-size: 16px;
        border: none;
        outline: none;
        color: white;
        padding: 14px 16px;
        background-color: inherit;
        font-family: inherit;
        margin: 0;
    }

    .navbar a:hover, .dropdown:hover .dropbtn {
      display: block; 
    }

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

    .dropdown-content a {
        float: none;
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

        .dropdown-content a:hover {
            background-color: #ddd;
        }

.dropdown:hover .dropdown-content {
    display: block;
}
.navbar-brand {
    display: inline-block;
    padding-top: .3125rem;
    padding-bottom: .3125rem;
    margin-right: 1rem;
    font-size: 1.25rem;
    line-height: inherit;
    white-space: nowrap;
}

.navbar-light .navbar-brand {
    color: rgba(0,0,0,.9);
}

我无法按照自己的方式进行设计。项目名称，下拉菜单和徽标始终是一个接一个地出现的，但是我希望下拉菜单和徽标位于右侧。有人可以帮我解决这个问题吗？谢谢

4 个答案:

答案 0 :(得分：1)

我希望这是您所期望的：

创建一个新的div（右侧内容），然后将下拉div和公司徽标包装到该div中。 然后将flex和space-between属性添加到导航栏div。 

.navbar {
  overflow: hidden;
  width: 100%;
  background-color: #333;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.right-side-content {
  display: flex;
  align-items: center;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  display: block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.navbar-brand {
  display: inline-block;
  padding-top: .3125rem;
  padding-bottom: .3125rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  line-height: inherit;
  white-space: nowrap;
}

.navbar-light .navbar-brand {
  color: rgba(0, 0, 0, .9);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" </head>

  <body>
    <div class="navbar">
      <div class="navbar navbar-light" style="backgroundColor:#483D8B">
        <a class="navbar-brand" href="#" style="fontSize:20px;color:#FFFFFF">Dashboard</a>

        <div class="right-side-content">
          <div class="dropdown">
            <button class="dropbtn">Dropdown
                    
                    </button>
            <div class="dropdown-content">
              <a href="#">Link 1</a>
              <a href="#">Link 2</a>
              <a href="#">Link 3</a>
            </div>
          </div>
          <a class="navbar-brand navbar-right" href="#">
            <img alt="CompanyLogo" src="https://dummyimage.com/40x40/fff/000?text=logo" />
          </a>
        </div>

      </div>
    </div>
  </body>

</html>

答案 1 :(得分：0)

将float: left;更改为float: right;

答案 2 :(得分：0)

  1. 在css类await Mainloan.aggregate([ { $match: { $and: [ { $or: [{"guarantorOne. guarantorsId": 2}, {"guarantorOne.gAccepted": false}], }, { $or: [{"guarantorTwo. guarantorsId": 2}, {"guarantorTwo.gAccepted": false}] } ] } }, { $lookup: { from: "accounts", localField: "_userId", foreignField: "_id", as: "user" } }, { $unwind: "$user" }, { $project: { "amount": 1, "duration": 1, "user._id": 1, "user.firstName": 1, "user.lastName": 1, "user.middleName": 1, } }]); 中将float: left;更改为float: right;； 
.dropdown
  1. 在CSS类.dropdown { float: right; overflow: hidden; } 中添加float: right;； 
.navbar-light .navbar-brand

答案 3 :(得分：0)

尝试一下。

@media only screen and (max-width: 768px) {
       .logo {
              display: none;
       }
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
       <head>
              <meta charset="utf-8">
              <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
              <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
              <link rel="stylesheet" href="style.css">
              <title>Bootstrap Example</title>
       </head>
       <body>
       <!-- Navigation -->
       <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
         <a class="navbar-brand" href="#">App Name</a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
         </button>

         <div class="collapse navbar-collapse" id="navbarSupportedContent">
           <ul class="navbar-nav mr-auto">
             <li class="nav-item dropdown">
               <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                 Dropdown
               </a>
               <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                 <a class="dropdown-item" href="#">Link 1</a>
                 <a class="dropdown-item" href="#">Link 2</a>
                 <a class="dropdown-item" href="#">Link 3</a>
               </div>
             </li>
           </ul>
                  <div class="logo" >
                         <img class="hidden-xs" src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
                  </div>
       </nav>

       <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
       </body>
</html>

相关问题
最新问题