gpt4 book ai didi

html - Logo 和 Logo 名称堆叠在一起,而不是并排放置

转载 作者:太空宇宙 更新时间:2023-11-04 02:04:21 28 4
gpt4 key购买 nike

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

我想要的是他们肩并肩。因此,左侧是 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>

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

最佳答案

您只需要一些 CSS 即可实现此目的。

我用 span 包裹了您的网站名称,因为您的网站品牌链接中已经有了图像。

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

使用这种方法,您可以轻松地将 Logo 与顶部、底部、基线等对齐。

fiddle :https://jsfiddle.net/karolbrennan/qjuqgke1/

另一种方法是将 Logo 简单地 float 到左侧:

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

请注意,我清除了链接,这样您就不会遇到 float 问题。

fiddle :https://jsfiddle.net/karolbrennan/pny02qcm/1/

关于html - Logo 和 Logo 名称堆叠在一起,而不是并排放置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41112122/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com