如何固定屏幕右侧的间距答案

【问题标题】：How can I fix spacing to the right of screen如何固定屏幕右侧的间距
【发布时间】：2022-11-18 15:08:41
【问题描述】：

到目前为止，在我的 html 文件中，我有一个画布和一个 div 标签。 div 标签包含四个段落标签，我试图将它们设置在屏幕顶部、中间和内联。当我将它们设置为内联并尝试向其添加一些填充时，问题就出现了。第三段突然降到第一段下面。现在是 css 和 html。

body {
    width: 100%;
    height: 100%;
    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;
}

div {
    position: absolute;
    font-size: 130%;
    color:azure;
}

p {
    transition: opacity 0.3s ease-in-out;
    color:azure;
    border: 1px solid azure;
    display: inline;
    padding-right: 10%;
}

<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>

我试着去掉所有的边距和填充，所以我做到了

保证金：0；填充：0；

【问题讨论】：

标签： html css web-frontend

【解决方案1】：

我想你想把所有的段落都放在中间，你可以像下面这样尝试，请发表评论以便更清楚。

body {
width: 100%;
height: 100%;
border: 1px solid azure;
}

canvas {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
user-select: none;

border: 1px solid azure;
}

<canvas id="canvas1"></canvas>
<div id="Events" style="text-align: center;">
    <p id="clicks">Clicks:</p>
    <p id="dbClicks">Double Clicks:</p>
    <p id="mouseLeft">Mouse Left:</p>
    <p id="keyPress">Key Presses:</p>
</div>

【讨论】：