html - 将文本与图像一起放入导航栏品牌内

Question

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

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

Answer 1

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