html - 无法让图片和文字在同一行

Question

我希望“PaperKlip”文本和图像都在同一行。我试着让他们都使用 display: inline; 但这似乎不起作用。我希望它们在屏幕右侧对齐，图像一直对齐到右边，文本直接对齐到它的左边。

相反，它们是这样显示的，一个在另一个之上:

HTML:

<a class="navbar-brand" href="./index.html">PaperKlip</a>
<img src="images/paperklip.jpg" height="70px" width="70px" class="img-responsive" id="navbar-brand-logo" alt=""/>

CSS:

.navbar-brand {
    display: inline;
    color: #FFF !important;
    text-transform: none;
    margin: 0px;
    font-size: 37px;
    padding: 20px 0px 0px;
    font-family: Roboto-thin;
    font-weight: 400;
}

#navbar-brand-logo{
    display: inline;
}

Answer 1

我只需将 float:right 添加到您的 HTML 标记并反转 HTML 中的顺序，一切都是您想要的。这是一个plunker但我认为您的 CSS 中还有其他因素会影响这些 HTML，因为当我应用您的代码时，我没有在图像顶部添加文本。

HTML:

<img src="images/paperklip.jpg" height="70px" width="70px" class="img-responsive" id="navbar-brand-logo" alt=""/>
<a class="navbar-brand" href="./index.html">PaperKlip</a>

这是 CSS:

.navbar-brand {
  display: inline;
  color: black;
  text-transform: none;
  margin: 0px;
  font-size: 37px;
  padding: 20px 0px 0px;
  font-family: Roboto-thin;
  font-weight: 400;
  float: right;
}

#navbar-brand-logo{
  display: inline;
  float: right;
}