如何使用HTML和CSS实现header中标题在logo与登出链接间等间距排布

核心解决思路 #

用Flex布局将logo、页面标题、登出按钮放在同一头部容器内，自动分配剩余空间实现两侧等间距，同时修正原代码的结构和语法错误。

原代码核心问题 #

• HTML结构不规范：可见元素（logo、标题、登出链接）不能放在head标签内，所有页面可见内容必须放在body标签中
• PHP引入语法错误：不能用自定义的<include>标签引入外部文件，需使用PHP官方的<?php include '文件路径'; ?>语法
• 布局逻辑错误：登出按钮使用绝对定位脱离了文档流，无法和另外两个元素对齐计算间距

修改后代码 #

1. Styles.css

* {
    background-color: black;    
    font-family: verdana;
    font-size: 14px;
    color: white;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* 头部flex容器，三元素横向排列垂直居中 */
.header-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    gap: 20px; /* 最小间距，避免窗口过窄时内容挤压重叠 */
}
/* 左右区域最小宽度和logo宽度一致，保证两侧预留空间相等 */
.logo-wrap, .logout-wrap {
    min-width: 300px;
}
/* 登出按钮右对齐 */
.logout-wrap {
    text-align: right;
}
/* 标题占满剩余空间，文本自动居中 */
h1 {
    font-size: 45px;
    text-align: center;
    flex: 1;
}

2. header.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title><?php echo $page_title; ?></title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="header-wrap">
        <!-- 左侧logo区域 -->
        <div class="logo-wrap">
            <a href="home.php">
                <img class="logo" src="https://images.squarespace-cdn.com/content/v1/5d5a565bed5af400017a2c97/1614516482816-LL1JVIR67NFFN016FNID/THRIVE-LOGO-2_RGB_NEW_WHITE.png?format=1500w" width="300" height="50" alt="Company logo">
            </a>
        </div>
        <!-- 中间页面标题 -->
        <h1><?php echo $page_title; ?></h1>
        <!-- 右侧登出区域 -->
        <div class="logout-wrap">
            <a href="logout.php?logout">登出</a>
        </div>
    </div>

3. set_goal.php

<?php
// 先定义当前页面的标题
$page_title = "请设置你的目标并选择项目类型";
// 引入头部公共文件
include "header.php";
?>

<!-- 这里写当前页面的其他主体内容 -->

效果说明 #

上述代码实现后，不管浏览器窗口宽度怎么变化，logo右侧到标题左侧、标题右侧到登出按钮左侧的间距会始终保持相等，完全符合需求。

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