徽標和徽標名稱堆疊，而不是並排

在我的網站上，我有一個徽標圖像，然後公司名稱。目前它是堆疊的，所以它是徽標圖片，下面是公司名稱。徽標和徽標名稱堆疊，而不是並排

我想要的是他們並肩。所以左邊是logo圖片，右邊是公司名稱。

我在做什麼錯？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
\t <body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"> 
 
\t \t <header> 
 
\t \t \t <nav class="navbar navbar-default navbar-fixed-top" style="background-color: #CFE4F1"> 
 
\t \t \t <div class="container-fluid"> 
 
\t \t \t  <!-- Brand and toggle get grouped for better mobile display --> 
 
\t \t \t  <div class="navbar-header"> 
 
\t \t \t  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
\t \t \t   <span class="sr-only">Toggle navigation</span> 
 
\t \t \t   <span class="icon-bar"></span> 
 
\t \t \t   <span class="icon-bar"></span> 
 
\t \t \t   <span class="icon-bar"></span> 
 
\t \t \t  </button> 
 
\t \t \t  <a class="navbar-brand" href="#home" style="color:"><img src="https://pbs.twimg.com/profile_images/698660793265446912/cAMrktol.png" alt="A Super Maid Logo"> COMPANY NAME</a> 
 
\t \t \t  </div>

來源

2016-12-13 raimond

你只需要一些CSS來實現這一目標。

我用一個跨度包裹了您的網站名稱，因爲您的網站品牌鏈接已包含在圖像內。

.navbar-brand img, .navbar-brand span { 
    display: inline-block; 
    vertical-align: middle; 
}

使用這種方法，你可以很容易地對準標誌的頂部，底部，基線等

小提琴：https://jsfiddle.net/karolbrennan/qjuqgke1/

的另一種方法是簡單地標識浮到左：

.navbar-brand img { 
    float: left; 
} 
.navbar-brand { 
    clear: both; 
}

請注意，我清除了鏈接，因此您不會遇到浮動問題。

小提琴：https://jsfiddle.net/karolbrennan/pny02qcm/1/

來源

2016-12-13 01:01:36

它可以在你的小提琴，但它並不在我的網站工作。 – raimond

你可以給我一個鏈接，我可以看看你？你可能有一些CSS覆蓋它。 –

徽標和徽標名稱堆疊，而不是並排

回答

相關問題