検索バーの横に画像を配置する方法

debugcn 投稿 Dev

dobos 90

そこで、NerdHub（YouTubeチャンネル）のファンページを書きたいのですが、「Search ...」が（NerdHubの）ロゴと一列に並んでいないので行き詰まりました。

ご覧のとおり、次のようになります。

次のようになります。

私は複製を読みましたが、display: inline-block;私も助けにはなりませんでした。

すべてのファイル：https：//drive.google.com/drive/folders/1Fl4MIf6otZq8w_xm17GD5NY9wbj5pM7G？usp = Sharing

<html>
<head>
	<title>Nerdhub</title>
</head>
<body>
<div class="con">
    <div id="fel">
    </div>
</div>



<div id="asd">
    <form><input type="text" name="1" value="Search..."></form> 
</div>

<div id="img">
    <img src="nerdhub.jpg" width="200px">
</div>

<div id="adbytelekom">
    <p class="a">Remove Ads</p>
    <img src="adbytelekom.jpg">
    <div id="ad">
        <p class="a">Ads by Telekom</p>
    </div>
</div>

<style type="text/css">
    body {
        background-color: black;
    }

    input[type="text"] {
        background-color: 4f4f4f;
        color: gray;
        padding: 5px 300px;
    }

    p.a {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
    }

    #img {
        text-align: top-left;
    }

    #asd {
        text-align: center;
    }

    #reklambytelekom {
        margin-top: 0px;
        text-align: right;
        margin-right: 100px;
        color: white;
    }

    #ad {
        margin-right: 115px;
    }

    #fel {
        color: white;
        text-decoration: none;
    }
 </style>
 </body>
 </html>

クレイ

簡単な方法はflex、上記の答えを使用することです。ボックス内のアイテムをalign-itemsプロパティに揃えることができます。1行に配置したい要素の周りに別のdivを追加し、次のスタイルを指定するだけです。

#wrapper {
  display: flex;
  align-items: center;
}

また、左側にロゴを配置したいので、検索バーの前にロゴを配置する必要があります。

<div id="wrapper">    
  <div id="img">
    <img src="nerdhub.jpg" width="200px">
  </div>

  <div id="asd">
    <form><input type="text" name="1" value="Search..."></form> 
  </div>
</div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]