How do I show all of these HTML elements in the same line-CodePudding

So I have 4 elements which I want to display all in one line on my webpage:

  <input checked type="radio" name="TZ" id="local-time" ></input>
  <p id="inp-n1" >Local Time</p>
  <input type="radio" name="TZ" id="eastern-time" ></input>
  <p id="inp-n2" >Eastern Time</p>

How do I do this?

CodePudding user response：

Here is one option wrap it in a main div and set flex direction row.

.wrapper {
  display: flex;
  flex-direction: row;
}

<div >
  <input checked type="radio" name="TZ" id="local-time"></input>
  <p id="inp-n1" >Local Time</p>
  <input type="radio" name="TZ" id="eastern-time"></input>
  <p id="inp-n2" >Eastern Time</p>
</div>

CodePudding user response：

You can use label instead of p, which is more preferred to use

<input checked type="radio" name="TZ" id="local-time" ></input>
<label for="local-time">Local Time</label>
<input type="radio" name="TZ" id="eastern-time" ></input>
<label for="eastern-time">Eastern Time</label>