72

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

次のコードがあります。

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

ロゴとH1を一列に並べる方法を教えてください。ありがとう！

4

13 に答える 13

99

例として ( 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;
}

デモ

于 2012-07-28T13:19:39.393 に答える
22

これを試して：

  1. 両方の要素をコンテナー DIV に入れます。
  2. そのコンテナにプロパティ overflow:auto を与えます
  3. float:left を使用して、両方の要素を左にフロートします。
  4. 親コンテナの全幅を占有しないように、H1 に幅を与えます。
于 2012-07-28T13:15:08.133 に答える
20

画像がロゴの一部である場合は、次のようにしてください。

<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>
于 2012-07-28T13:15:15.710 に答える
8

これを試して：

<img style="display: inline;" src="img/logo.png" alt="logo" />
<h1 style="display: inline;">My website name</h1>
于 2012-07-28T13:13:27.307 に答える
6

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

于 2013-03-12T18:47:54.793 に答える
3

Billy Moatが言ったように、<img>と<h1>をaでラップし、画像を左にフロートさせるために<div>使用し、 andを設定して、フローティング要素をクリアするために使用することができます。float: left;<div> widthline-heighth1<div style="clear: float;"></div>

フィドル

于 2012-07-28T13:24:33.647 に答える
3

たった1行のコードを使用してこれを行うことができます..

<h1><img src="img/logo.png" alt="logo"/>My website name</h1>
于 2019-01-02T16:27:07.310 に答える
2

ブートストラップを使用して、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>
于 2015-08-07T15:32:12.687 に答える
0

あなたのcssファイルimg { float: left; }でh1 {float: left; }

于 2012-07-28T13:13:21.897 に答える
0

手順:

  1. コンテナ div で両方の要素を囲みます。
  2. overflow:autoコンテナ divに追加します。
  3. float:left最初の要素に追加します。
  4. 2 番目の要素に追加position:relative; top: 0.2em; left: 24emします (上と左の値は、ユーザーによって異なります)。
于 2019-06-25T08:21:47.073 に答える