将徽标和文本放在同一行中

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

我遇到的问题是徽标只是覆盖“登录身份”文本，所以只有徽标在页面上保持可见，并且没有文本。

下面是代码：

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

如何，我可以有我的页面左侧的标志，和我的文字在页面的右侧，但在同一行？

来源

2017-03-13 wesleyy

有一些缺少的标记和一些自结束标记也用于 –

如果是HTML（相对于XHTML）构建'<跨度类=“myLogo “/>'不会按照你想要的方式工作。这可能是你的问题的原因之一。 –

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

来源

2017-03-13 11:41:30

为什么你使用内容而不是<img>标签？

不管怎么说，我可以建议你是用Flexbox的：

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

来源

2017-03-13 11:41:34

你必须要2下.user课改

删除在线块.header类
变化float:right

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

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

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

来源

2017-03-13 11:43:42 Gowtham

如果我删除内嵌块，那么即使徽标完全错位。它脱离了div。 – wesleyy

将边距设置为徽标类 – Gowtham

从.mylogo类删除边距 – Gowtham

你可以试试这个方法

HTML：

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

来源

2017-03-13 11:44:57 Anirudh

我想你应该设置

display: inline-block;

两个类或改变类用户

float: right

来源

2017-03-13 11:46:37 DarknessZX

将徽标和文本放在同一行中

回答

相关问题