Platzieren Sie Logo und Text in der gleichen Zeile

Ich versuche, den Header-Teil meiner Seite zu erstellen. In der Kopfzeile möchte ich ein Bild (ein Logo) auf der linken Seite und ein "angemeldet als ..." auf der rechten Seite derselben Zeile haben.Platzieren Sie Logo und Text in der gleichen Zeile

Das Problem, das ich habe, ist, dass das Logo einfach überschreibt den "eingeloggt als" Text, so nur Logo bleibt auf der Seite sichtbar, und es gibt keinen Text.

Hier ist der Code:

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

Wie kann ich mein Logo auf der linken Seite der Seite, und meinen Text auf der rechten Seite der Seite habe, aber in derselben Zeile?

Quelle

2017-03-13 wesleyy

Es gibt einige fehlende Tags und einige Schließung Selbst Tags verwendet auch –

Wenn diese HTML ist (im Gegensatz zu XHTML gegen) das Konstrukt '' funktioniert nicht so, wie Sie es möchten. Das könnte eine der Ursachen Ihres Problems sein. –

Verwenden Sie dieses 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; 
    }

Quelle

2017-03-13 11:41:30

Warum verwenden Sie Inhalt anstelle eines Tags ?

Wie auch immer, was könnte ich für Sie vorschlagen, ist Flexbox zu verwenden:

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

Quelle

2017-03-13 11:41:34

Sie haben

2 Änderungen vorzunehmen

entfernen Inline-Block für .header Klasse
ändern float:right unter .user Klasse

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

Quelle

2017-03-13 11:43:42 Gowtham

Wenn ich Inline-Block entferne, dann ist sogar das Logo völlig fehl am Platz. Es fällt aus dem div. – wesleyy

setzen Sie die Marge auf die Logo-Klasse – Gowtham

entfernen Sie Rand-Top von .mylogo clas – Gowtham

Sie diese Methode

HTML versuchen:

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

Quelle

2017-03-13 11:44:57 Anirudh

ich glaube, Sie

setzen sollten

für beide Klasse oder Änderung Klasse Benutzer

float: right

Quelle

2017-03-13 11:46:37 DarknessZX

Platzieren Sie Logo und Text in der gleichen Zeile

Antwort

Verwandte Themen