如何将社交媒体图标添加至网页Header并实现横向布局？

直接给你调整好的完整代码，能实现「WELCOME和横向排列的社交图标同处蓝色Header」的效果：

<html>
  <head>
    <title>SAMPLE 1</title>
    <style>
      body {
        background-color: rgb(240, 233, 233);
      }
      .header {
        background-color: #09e0f8;
        padding:20px;
        border-radius: 70px;
        /* 用flex布局让内部元素横向排列并垂直居中 */
        display: flex;
        align-items: center;
      }
      .header h1 {
        color:rgb(255, 51, 0);
        font-family:"Pacifico", cursive ;
        padding-left: 30px;
        /* 清除h1默认外边距，避免布局间距混乱 */
        margin: 0;
      }
      .social-list {
        /* 清除ul默认的内边距、外边距和列表样式 */
        list-style-type: none;
        padding: 0;
        margin: 0 30px 0 auto;
      }
      .social {
        /* 让列表项横向排列 */
        display: inline-block;
        margin-right: 10px;
      }
      /* 去掉最后一个图标的右边距，避免多余空白 */
      .social:last-child {
        margin-right: 0;
      }
    </style>
  </head>
  <body>
    <header class="header">
      <h1>WELCOME</h1>
      <ul class="social-list">
        <li class="social"><img class="insta" src="instagram.png" width="30px"></li>
        <li class="social"><img class="face" src="facebook.png" width="30px"></li>
        <li class="social"><img class="twi" src="twitter.png" width="30px"></li>
      </ul>
    </header>
  </body>
</html>

修改关键点说明： #

• 给.header添加display: flex; align-items: center;：这是实现横向布局的核心，能让Header内的标题和图标容器自动横向排列，同时保持垂直居中，解决了原代码中标题占满一行导致图标跑到下方的问题。
• 新增.social-list类给ul：清除列表默认的内边距、外边距和圆点样式，用margin: 0 30px 0 auto让图标容器整体靠右，和左侧标题形成左右分布的布局。
• 调整.social类：去掉原代码的float:right（flex布局不需要浮动），用display: inline-block让列表项横向排列，设置margin-right给图标之间留间距，最后用:last-child清除最后一个图标的右边距，避免多余空白。
• 清除h1默认外边距：避免Header内部上下间距过大，保持布局紧凑。

内容的提问来源于stack exchange，提问作者4U FROM ME