将HTML/CSS代码迁移至WordPress时的样式显示异常问题

问题根源在于WordPress主题的默认样式可能覆盖了你设置的inline-block属性，或是容器宽度在WordPress环境下不足以容纳标题与select横向排列。以下是两种可靠修复方案：

方案1：使用Flex布局（推荐） #

Flex布局能更稳定实现横向排列，规避inline-block的空格、样式覆盖等潜在问题。修改后的CSS如下：

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&display=swap");
* {
    font-family: "Playfair Display", serif;
    box-sizing: border-box;
    margin: 0;
    padding: 0; /* 重置默认内外边距，避免主题样式干扰 */
}
.container {
    width: 1700px;
    margin: 10px 200px;
}

body {
    background-color: #1d1345;
    color: #f4f4f4;
}

.heading {
    font-size: 60px;
    margin-right: 10px;
}
/* 给上下两组容器添加flex布局 */
.top, .bottom {
    display: flex;
    align-items: center; /* 让标题和select垂直居中对齐 */
    margin-bottom: 20px; /* 可选：增加两组内容的间距 */
}
select {
    font-size: 40px;
}
#output {
    width: 400px;
}

方案2：强制锁定inline-block并适配容器宽度 #

若坚持使用inline-block，需强制覆盖主题可能的样式，并确保容器宽度足够：

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&display=swap");
* {
    font-family: "Playfair Display", serif;
    box-sizing: border-box;
}
.container {
    max-width: 100%;
    margin: 10px auto;
    padding: 0 20px; /* 适配小屏幕，避免宽度溢出 */
}

body {
    background-color: #1d1345;
    color: #f4f4f4;
}

.heading {
    font-size: 60px;
    display: inline-block !important; /* 强制覆盖主题的display设置 */
    margin-right: 10px;
    vertical-align: middle; /* 与select垂直居中对齐 */
}
select {
    font-size: 40px;
    display: inline-block !important;
    vertical-align: middle;
}
#output {
    width: 400px;
}

失效原因说明 #

• WordPress主题通常会给h1标签默认设置display: block、margin-bottom等样式，可能直接覆盖你自定义的inline-block属性。
• 主题全局样式可能修改了select的默认显示方式，或是容器在WordPress布局中宽度被压缩，导致标题与select无法在同一行容纳。

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