如何让go-button div渲染在initial-bar div内部？

你的代码里有两个关键问题导致go-button跑到initial-bar外面：

1. HTML标签不匹配：<h1 class="p-title-bar">用了</p>来闭合，浏览器会自动修复这个错误，但会打乱原本的DOM结构，直接导致go-button被挤出容器。
2. 容器布局未控制：块级元素默认独占一行，即使DOM结构正确，也可能因为布局问题让go-button看起来在容器外。

修正后的代码 #

CSS部分

body {
    background: #2a2a2a;
    color: white;
    font-family: sans-serif;
}
.p-title-bar {
    color: #FFFFFF;
    font-size: 32px;
    line-height: 18px;
    font-style: oblique;
    /* 用padding代替空div做间距，更简洁 */
    padding-left: 20px;
}
.go-button {
    background-color: #207000;
    border-radius: 10px;
    width: 100px;
    height: 50px;
}
.initial-bar {
    background-color: #1a1a1a;
    width: 1440px;
    height: 90px;
    /* 用flex布局让内部元素在容器内排列，垂直居中 */
    display: flex;
    align-items: center;
    /* 让元素两端对齐，标题左，按钮右 */
    justify-content: space-between;
    padding: 0 20px;
}

HTML部分

<div class="initial-bar">
    <h1 class="p-title-bar">.HUS</h1>
    <div class="go-button"></div>
</div>

修改说明 #

• 彻底修复了<h1>标签的闭合错误，保证DOM结构正确；
• 给.initial-bar添加flex布局，既能让内部元素都在容器内，还能轻松实现垂直居中、左右分布的效果；
• 去掉了无用的text-title-spacing空div，用padding-left给标题加间距，代码更简洁。

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