it-swarm.com.de

Logo und H1-Überschrift in derselben Zeile

Ich möchte meine erste Webseite erstellen, aber ich habe ein Problem festgestellt.

Ich habe folgenden Code:

<img src="img/logo.png" alt="logo" />
<h1>My website name</h1>

Ich würde gerne wissen, wie man das Logo und das H1 in die gleiche Zeile bringt.

45
Six Quads

Als Beispiel ( DEMO ):

HTML:

<div class="header">
  <img src="img/logo.png" alt="logo" />
  <h1>My website name</h1>
</div>

CSS:

.header img {
  float: left;
  width: 100px;
  height: 100px;
  background: #555;
}

.header h1 {
  position: relative;
  top: 18px;
  left: 10px;
}

DEMO

66
Danil Speransky

Versuche dies:

  1. Legen Sie beide Elemente in einen Container DIV.
  2. Geben Sie diesem Container den Eigenschaftsüberlauf: auto
  3. Float beide Elemente nach links mit Float: left
  4. Geben Sie dem H1 eine Breite, damit er nicht die volle Breite des übergeordneten Containers einnimmt.
20
Billy Moat

Wenn Ihr Bild Teil des Logos ist, warum nicht:

<h1><img src="img/logo.png" alt="logo" /> My website name</h1>

Verwenden Sie CSS, um es besser zu gestalten.

Außerdem empfiehlt es sich, aus Ihrem Logo einen Hyperlink zu machen, der den Benutzer zur Startseite zurückbringt.

Sie könnten also folgendes tun:

<h1 id="logo"><a href="/"><img src="img/logo.png" alt="logo" /> My website name</a></h1>
11
Moin Zaman

Versuche dies:

<img style="display: inline;" src="img/logo.png" alt="logo" />
<h1 style="display: inline;">My website name</h1>
6
M. Ahmad Zafar

Fügen Sie einfach das img-Tag als Teil des Inhalts in das h1-Tag ein.

4
Dylan

Sie können es tun, wie es Billy Moat gesagt hat, umwickeln Sie Ihren <img> und <h1> in einen <div> und verwenden Sie float: left;, um Ihr Bild nach links zu verschieben, setzen Sie den <div>width und dann einen line-height für Ihren h1 und verwenden Sie <div style="clear: float;"></div>, um Ihre schwebenden Elemente zu löschen.

Fiddle

3
Mr. Alien

sie können dies tun, indem Sie nur einen Zeilencode verwenden.

<h1><img src="img/logo.png" alt="logo"/>My website name</h1>
1
shreya_js
<head>
<style>
header{
    color: #f4f4f4;
    background-image: url("header-background.jpeg");    
}

header img{
    float: left;
    display: inline-block;
}

header h1{
    font-size: 40px; 
    color: #f4f4f4;
    display: inline-block;
    position: relative;
    padding: 20px 20px 0 0;
    display: inline-block;
}
</style></head>


<header>
<a href="index.html">
    <img src="./branding.png" alt="technocrat logo" height="100px" width="100px"></a>
    <a href="index.html">
    <h1><span> Technocrat</span> Blog</h1></a>
</div></header>
0
satya pati

Ich würde bootstrap verwenden und die HTML so einstellen:

<div class="row">
    <div class="col-md-4">
        <img src="img/logo.png" alt="logo" />
    </div>
    <div class="col-md-8">
        <h1>My website name</h1>
    </div>
</div>
0
RustyIngles

Dies ist mein Code ohne div im Header-Tag. Mein Ziel/Absicht ist es, dasselbe Verhalten mit minimalen HTML-Tags und CSS-Stil zu implementieren. Es klappt.

whois.css

.header-img {
    height: 9%;
    width: 15%;
}

header {
    background: dodgerblue;

}

header h1 {
    display: inline;
}

whois.html

<!DOCTYPE html>
<head>
    <title> Javapedia.net WHOIS Lookup </title>
    <link rel="stylesheet" type="text/css" href="whois.css"/>
</head>
<body>
    <header>
        <img class="header-img" src ="javapediafb.jpg" alt="javapedia.net" href="https://www.javapedia.net"/>
        <h1>WHOIS Lookup</h1>
    </header>
</body>

ausgabe:  Result

0
javapedia.net

in Ihrer CSS-Datei tun Sie img { float: left; } und h1 {float: left; }

0
Andy

Überprüfen Sie dies. 

 .header{width:100%;
    }

    .header img{ width: 20%; //or whatever width you like to have

    }

    .header h1{

    display:inline; //It will take rest of space which left by logo.
}
0
Saqib Omer

Schritte:

  1. Umgeben Sie beide Elemente mit einem Container div.
  2. Hinzufügen overflow:auto zum Container div.
  3. Hinzufügen float:left zum ersten Element.
  4. Hinzufügen position:relative; top: 0.2em; left: 24em bis zum zweiten Element (Werte für Oben und Links können je nach Ihnen variieren).
0
Richa Mehta