將徽標和文本放在同一行中

我正在嘗試創建頁面的標題部分。在標題中，我想在左側顯示圖像（徽標），並在同一行的右側顯示「以...登錄」。將徽標和文本放在同一行中

我遇到的問題是徽標只是覆蓋「登錄身份」文本，所以只有徽標在頁面上保持可見，並且沒有文本。

下面是代碼：

<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

將徽標和文本放在同一行中

回答

相關問題