gpt4 book ai didi

html - 将文本与图像一起放入 navbar-brand

转载 作者:行者123 更新时间:2023-11-28 10:47:17 26 4
gpt4 key购买 nike

这里我有一个固定在顶部的导航栏,我在其中放置了图像和文本。我不明白为什么标题不会以与图像对齐的方式进入灰色矩形。非常感谢任何帮助

http://jsfiddle.net/tw10gx2d/

这是CSS

.navbar-default {
height: 70px;
background-color: #333;
border: 0;
}

.navbar .logo {
width: 50px;
}

.navbar-brand {
margin-top: 10px;
padding: 0;
width: 370px;
background-color: #ddd;
}

最佳答案

JSFiddle - DEMO

您可以使用 margin:0;display: inline-block;h1 标签和 display: inline-block ;.navbar-brand

HTML:

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container"> <a href='#' class='navbar-brand'>
<img src="http://colorlib.com/wp/wp-content/uploads/2014/02/Olympic-logo.png" class="logo">
<h1 class="heading">Title</h1>
</a>
</div>
</nav>

CSS:

.navbar-default {
height: 70px;
background-color: #333;
border: 0;
}
.navbar .logo {
width: 50px;
}
.heading {
margin:0;
display: inline-block;
}
.navbar-brand {
margin-top: 10px;
padding: 0;
width: 370px;
background-color: #ddd;
display: inline-block;
}

关于html - 将文本与图像一起放入 navbar-brand,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25733597/

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