web-dev-qa-db-ja.com

ロゴ画像と同じ行のH1見出し

最初のWebページを作成したいのですが、問題が発生しました。

私は次のコードを持っています：

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

ロゴとH1を同じ行にする方法を知りたいです。ありがとう！

htmlcsspositioninline
49
Six Quads

例として（ 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

71
Danil Speransky

これを試して：

  1. 両方の要素をコンテナDIVに入れます。
  2. そのコンテナにプロパティoverflow：autoを与えます
  3. Float：leftを使用して両方の要素を左にフロートします
  4. H1に幅を与えて、親コンテナーの幅全体を占有しないようにします。
20
Billy Moat

画像がロゴの一部である場合、これを行わないのはなぜですか。

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

CSSを使用してスタイルを改善します。

また、ロゴをハイパーリンクにして、ユーザーをホームページに戻すこともベストプラクティスです。

だからあなたができる：

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

これを試して：

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

コンテンツの一部としてimgタグをh1タグ内に貼り付けるだけです。

4
Dylan

ビリーモートが言ったように、<img>と<h1>を<div>でラップし、float: left;を使用して画像を左にフロートし、<div>widthそしてline-heightにh1を設定し、<div style="clear: float;"></div>を使用して浮動要素をクリアします。

フィドル

3
Mr. Alien

これは、ヘッダータグ内にdivがない私のコードです。私の目標/意図は、最小限のHTMLタグとCSSスタイルで同じ動作を実装することです。できます。

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>

出力： Result

1
javapedia.net

これを行うには、1行のコードだけを使用します。

<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を使用して、htmlを次のように設定します。

<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

cssファイルでimg { float: left; }とh1 {float: left; }を実行します

0
Andy

これをチェックして。

 .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

手順：

  1. 両方の要素をコンテナdivで囲みます。
  2. overflow:autoをコンテナdivに追加します。
  3. float:leftを最初の要素に追加します。
  4. position:relative; top: 0.2em; left: 24emを2番目の要素に追加します（上と左の値はユーザーによって異なります）。
0
Richa Mehta