将标志和文字放在同一行

debugcn 发表于 Dev

韦斯利

我正在尝试创建页面的页眉部分。在标题中，我想在左侧有一个图像（一个标志），在同一行的右侧有一个“登录为...”。

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

这是代码：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。