html - 将徽标和文字放在同一行

我正在尝试创建页面的标题部分。在标题中，我想在左侧显示图像（徽标），并在同一行的右侧显示“以...身份登录”。

我的问题是徽标仅覆盖了“登录为”文本，因此只有徽标在页面上保持可见，并且没有文本。

这是代码：

<div class="header">
    <span class="myLogo"/>

    <span class="user">
        Logged in as " target="_blank">${user}</a>
    </span>
</div>

CSS：

    .myLogo {
      display: inline;
      float: left;
      margin-left: 10px;
      margin-top: 30px;
      content:url("myLogo.png");
    }

    .user {
      text-align: right;
      white-space: nowrap;
      display: inline;
      float: left;
      margin-top: 20px;
      margin-right: 30px;
      font-size: large;
    }

    .header {
      display: inline-block;
}

如何在页面的左侧显示徽标，在页面的右侧显示同一行的文字？

最佳答案

使用此CSS。

.myLogo {
          display: inline;
          float: left;
          margin-left: 10px;
          margin-top: 30px;
          content:url("myLogo.png");
        }

        .user {
          white-space: nowrap;
          display: inline;
          float: right;
          margin-top: 20px;
          margin-right: 30px;
          font-size: large;
        }

        .header {
          display: inline-block;
          width: 100%;clear:both;
    }