如何修复屏幕右侧间距及inline段落换行异常问题？

你的问题核心出在这两点：

• 外层div既没设置宽度，也没做正确的居中处理，导致p元素的padding-right:10%没有合理的参照宽度，极易超出视口触发换行
• 用display:inline实现横向排列的稳定性远不如inline-block或Flex布局

下面是修正后的完整代码：

修改后的CSS #

body {
    width: 100%;
    height: 100%;
    margin: 0; /* 清除浏览器默认边距 */
    padding: 0;
    border: 1px solid azure;
}

canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    user-select: none;
    background-color:rgb(33, 96, 33);
    border: 1px solid azure;
}

#Events {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%); /* 实现精准水平居中 */
    width: 90%; /* 限制容器宽度，避免内容撑爆视口 */
    font-size: 130%;
    color:azure;
    display: flex; /* 用Flex实现最稳定的横向排列 */
    justify-content: center; /* 内部元素再次居中对齐 */
    gap: 2rem; /* 用gap控制元素间距，比padding更直观可控 */
}

p {
    transition: opacity 0.3s ease-in-out;
    color:azure;
    border: 1px solid azure;
    margin: 0; /* 清除p标签默认边距 */
}

对应的HTML（无需改动） #

<canvas id="canvas1"></canvas>
<div id="Events">
  <p id="clicks">Clicks:</p>
  <p id="dbClicks">Double Clicks:</p>
  <p id="mouseLeft">Mouse Left:</p>
  <p id="keyPress">Key Presses:</p>
</div>

关键修改说明 #

1. div的居中与宽度控制：通过left:50%+transform:translateX(-50%)实现水平居中，设置width:90%避免内容超出视口范围
2. Flex布局替代inline：给div添加display:flex和justify-content:center，让内部p元素自动横向排列，不会轻易换行；用gap控制元素间距比padding更合理
3. 清除默认边距：移除body和p标签的默认margin/padding，避免浏览器默认样式干扰布局

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