How can I fix spacing to the right of screen-CodePudding

So far the in my html file I have a canvas and a div tag. The div tag contains four paragraph tags which I'm trying to set at the top of the screen, in the middle, and inline. The problem arises when I set them inline and try to add some padding to it. The the third paragraph suddenly just drops to under the first paragraph. Heres the css and html right now.

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>

I tried getting rid of all the margin and padding so I did

margin: 0; padding: 0;

CodePudding user response：

i think you want to set middle all paragraph you can try like below, please comment for more clarity.

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>

CodePudding user response：

Add/modify this lines to your CSS:

canvas {
display: flex;
justify-content: center;

and div must be div { position: relative; [...] }

CodePudding user response：

If I understand your question correctly, you need to display:inline-block; and not display:inline;.
Also add a margin:0; to <p> tags.

Also, if you want to display the <p> tags in one line, add width:100%; to your .div.

Something like this:

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-block;
    margin: 0;
    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>

CodePudding user response：

Possibly this is what you want. What I did was made a container div for your canvas and your Events div to be inside. I then aligned both items to be centered in the container and adjusted the top position of events.

See what I did here:

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

canvas {
    width: 100%;
    height: 100%;
    user-select: none;
    background-color:rgb(33, 96, 33);
    border: 1px solid azure;
}

#Events{
    position: absolute;
    font-size: 130%;
    color:azure;
    width: 100%;
    top: 0;
}

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

#container {
 position: relative;
text-align: center;
}

<div id="container">
<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>
</div>

EDIT: I also am not sure of the nature of this project, but maybe using div in place of p could make this even smoother. See here:

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

canvas {
    width: 100%;
    height: 100%;
    user-select: none;
    background-color:rgb(33, 96, 33);
    border: 1px solid azure;
}

#Events{
    position: absolute;
    font-size: 130%;
    color:azure;
    width: 100%;
    top: 0;
}

#Events div{
    transition: opacity 0.3s ease-in-out;
    color:azure;
    border: 1px solid azure;
    display: inline-block;
    padding-right: 10%;
    word-wrap: none;
  
}

#container {
 position: relative;
text-align: center;
}

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

CodePudding user response：

Its because the div is not taking the complete space. so now it does.

The paragraphs will still move down if you add padding to them, because you know they are inline element not flex

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

p {
    transition: opacity 0.3s ease-in-out;
    color:azure;
    border: 1px solid azure;
    display: inline-block;
    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>

CodePudding user response：

You can set the <p> tag display: inline-block; and set the container of these four paragraph width: 100vw;.

  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;
    width: 100vw;
  }

  p {
    transition: opacity 0.3s ease-in-out;
    color: azure;
    border: 1px solid azure;
    display: inline-block;
    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>