web-gelistirme-sc.com

Logo görüntüsü ve H1 aynı satırda ilerliyor

İlk web sayfamı oluşturmak istiyorum ancak bir sorunla karşılaştım.

Takip koduna sahibim:

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

Logo ve H1'in aynı satırda olmasını nasıl yapacağımı bilmek istiyorum.

45
Six Quads

Örnek olarak ( 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

Bunu dene:

  1. Her iki elemanı bir DIV kabına yerleştirin.
  2. Bu konteynere taşma özelliğini verin: auto
  3. Float kullanarak her iki elemanı da sola kaydırın: left
  4. H1'e bir genişlik verin, böylece ana kabının tam genişliğini almayacaktır.
20
Billy Moat

Resminiz logonun bir parçasıysa, neden bunu yapmıyorsunuz:

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

Daha iyi stil için CSS kullanın.

Ayrıca, logonuzu, kullanıcıyı ana sayfaya geri götüren bir köprü yapmak için de en iyi yöntemdir.

Yani yapabilirsin:

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

Bunu dene:

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

Sadece img etiketini içeriğin bir parçası olarak h1 etiketinin içine yapıştırın.

4
Dylan

Billy Moat'ın size söylediği gibi yapabilirsiniz, <img> ve <h1>'lerinizi <div> içine sarın ve resminizi sola kaydırmak için float: left; kullanın, <div>width öğesini ayarlayın ve line-height için h1 ayarlayın ve kayan öğeleri temizlemek için <div style="clear: float;"></div> kullanın.

Fiddle

3
Mr. Alien

bunu sadece bir satır kodunu kullanarak yapabilirsiniz.

<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

Bootstrap kullanır ve html dosyasını şu şekilde ayarlardım:

<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

Bu benim başlık etiketi içinde herhangi bir div olmadan benim kodum. Amacım/amacım aynı davranışı minimal HTML etiketleriyle ve CSS stiliyle uygulamak. İşe yarıyor.

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>

çıktı:  Result

0
javapedia.net

css dosyanızdaki img { float: left; } ve h1 {float: left; } yapın

0
Andy

Şunu bir kontrol et. 

 .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

Adımlar:

  1. Her iki elemanı da bir konteyner div ile çevreleyin.
  2. Konteyner divine overflow:auto ekleyin.
  3. İlk elemana float:left ekleyin.
  4. İkinci elemana position:relative; top: 0.2em; left: 24em ekleyin (Üst ve sol değerler size göre değişebilir).
0
Richa Mehta