无法将图片和文字放在同一行

Question

我想要＆＃34; PaperKlip＆＃34;文本和图像在同一行。我试过让他们都使用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;
}