Question

我正在尝试创建页面的标题部分。在标题中，我想在左侧有一个图像（一个标识），并且＆＃34;登录为...＆＃34;在同一行的右侧。

我遇到的问题是徽标只是覆盖了＆＃34;登录为＆＃34;文本，因此只有徽标在页面上保持可见，并且没有文本。

以下是代码：

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

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

Answer 1

我认为你应该设置

display: inline-block;

用于类或将类用户更改为

float: right

Answer 2

使用此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;
    }

Answer 3

为什么使用内容而不是<img>代码？

无论如何，我建议你使用flexbox：

.header{
  display: flex;
  align-items: baseline;
}
.user{
  margin-left: auto;
}

Answer 4

您必须进行2次更改

删除.header类
在float:right类

.user

＆＃13;

.myLogo {
      display: inline;
      float: left;
      margin-left: 10px;
      content:url("https://1.bp.blogspot.com/-NknV6HIVxKc/V06_WraBJEI/AAAAAAAAJWc/QwJMGxKHaywCIf2QHOLD-YwFQdn8VDaVgCLcB/s320/chelsea-logo.PNG");
      width:50px;
      height:50px;
    }

    .user {
      text-align: right;
      white-space: nowrap;
      display: inline;
      float: right;
      margin-right: 30px;
      font-size: large;
    }

＆＃13;

<div class="header">
    <span class="myLogo"></span>

    <span class="user">
        Logged in as <a target="_blank">hai</a>
    </span>
</div>

＆＃13;

Answer 5

你可以试试这个方法

HTML：

 <div>
<img class="myLogo" src = "myLogo.png"/>
</div>

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

CSS：

   .myLogo {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-top: 30px;
  height: 10px;
  width: auto;
}

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

.header {
  display: inline-block;
}

将徽标和文本放在同一行

5 个答案: