如何将搜索框置于Logo旁？HTML/CSS新手求助

首先注意你的HTML结构有误：<header> 标签不应该放在 <head> 里，要移到 <body> 内部，这是你之前尝试flex布局没生效的关键原因之一。

接下来用flex布局实现logo和搜索框横向排列，调整后的代码如下：

修改后的HTML #

<head>
  <title>Meine Rezepte</title>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <header>
    <img src="logo.png" alt="Logo">
    <input type="search" id="search" placeholder="Suche" />
  </header>
</body>

修改后的CSS #

header {
  display: flex;
  align-items: center; /* 让logo和搜索框垂直居中对齐 */
  gap: 15px; /* 给两者之间添加间距 */
  padding: 50px 0 0 300px; /* 把原来给img的外边距移到header上，控制整体位置 */
}

img {
  width: 100px;
}

关键说明： #

• 给<header>设置display: flex后，内部的img和input会默认横向排列
• align-items: center确保两者在垂直方向上对齐
• gap用来控制logo和搜索框之间的距离，比用margin更直观
• 把原来给img的padding-left和padding-top移到header上，这样整个头部区域的位置更易控制

如果需要调整整体的位置，直接修改header的padding值即可；如果要改变两者的对齐方式，比如靠右排列，可以给header加justify-content: flex-end（记得调整padding或者加margin来控制整体位置）。

内容的提问来源于stack exchange，提问作者Skizzo