Question

在我的网站上，我有一个徽标图片，然后是公司名称。目前它是堆叠的，所以它是徽标图像，下面是公司名称。

我想要的是让他们并肩。因此，左侧是徽标图像，然后右侧是公司名称。

我做错了什么？

<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>

	<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
		<header>
			<nav class="navbar navbar-default navbar-fixed-top" style="background-color: #CFE4F1">
			  <div class="container-fluid">
			    <!-- Brand and toggle get grouped for better mobile display -->
			    <div class="navbar-header">
			      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
			        <span class="sr-only">Toggle navigation</span>
			        <span class="icon-bar"></span>
			        <span class="icon-bar"></span>
			        <span class="icon-bar"></span>
			      </button>
			      <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>
			    </div>

Answer 1

你只需要一些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/

徽标和徽标名称是堆叠而不是并排

1 个答案: