前端布局问题：如何让Logo显示在黑色顶部栏内而非下方

嘿，我来帮你搞定这个布局小问题！你的代码里有几个细节需要调整，我一步步给你梳理清楚：

问题根源分析 #

你的Logo跑到顶部栏下方，主要是两个原因导致的：

• CSS语法错误：.topbar里的width=100%应该写成width: 100%;（CSS属性是用冒号分隔，不是等号），还有text-align: cente拼写错误，正确是text-align: center；
• 块级元素占位：<p>是块级元素，默认会占满整行宽度，后面的<img>自然就被挤到下一行了。

解决方案：用Flexbox实现理想布局 #

Flexbox是现在做这种水平布局最简洁高效的方式，我帮你修改了代码，完美实现黑色顶部栏、标题居中、Logo在右上角的效果：

<html>
<head>
    <title>MIT PULSE-Home</title>
    <style>
        .topbar{
            color:white;
            background-color:black;
            height:125px;
            width: 100%; /* 修正CSS语法错误 */
            text-align: center; /* 修正拼写错误 */
            border-bottom:solid 2px red;
            display: flex; /* 开启弹性布局 */
            align-items: center; /* 让元素在垂直方向居中 */
            padding: 0 20px; /* 给左右加内边距，避免Logo贴屏幕边缘 */
            box-sizing: border-box; /* 确保内边距不会让顶部栏超出屏幕宽度 */
        }
        .title {
            font-size: 100px;
            margin: 0; /* 去掉p标签默认的上下外边距，避免布局偏移 */
        }
        .logo {
            height:75px;
            margin-left: auto; /* 利用Flex特性，把Logo自动推到最右侧 */
        }
        body{
            margin:0;
            padding:0;
        }
    </style>
</head>
<body>
    <div class="topbar">
        <p class="title">MIT Pulse</p>
        <img src="logo.jpg" class="logo">
    </div>
</body>
</html>

关键修改点说明 #

• 给.topbar添加display: flex，将容器转为弹性布局容器，方便控制内部元素排列；
• align-items: center让标题和Logo在顶部栏的垂直方向居中对齐，避免上下偏移；
• 给Logo加margin-left: auto，这是Flex布局的小技巧，能自动把元素推到容器的最右侧；
• 添加padding和box-sizing: border-box，既避免Logo贴边，又保证顶部栏宽度始终是100%；
• 修正了CSS的语法和拼写错误，同时去掉<p>标签的默认外边距，消除不必要的布局间隙。

这样修改后，你的Logo就会稳稳待在顶部栏的右上角，标题也能完美居中啦！

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