CODEWITHSUNDEEP
htmlcss
Jamiex304
Jamiex304

Reputation: 242

How do I align check boxes horizontal to one an other

Quick question, I was wondering if it is possible to align my 3 checkbox's and there paragraphs horizontally to one an other instead of the way there are now which is vertical

thanks for any help 

	<div class="wrapper3">
	<p>Do You Want Sound ?</p>
	<input type="checkbox" value="No" style="color: Black;" id="sound">Yes
    <p>Do You want Flashes ?</p>
    <input type="checkbox" value="No" style="color: Black;" id="flash">Yes
    <p>Do You want Text ?</p>
    <input type="checkbox" value="No" style="color: Black;" id="text">Yes
    <br />
	</div>

Upvotes: 0

Views: 60

Answers (2)

user3476725
user3476725

Reputation:

I’d prefer using proper semantic Markup without inline CSS:

<div class="wrapper3">
  <p>
    <strong>Do You Want Sound?</strong>
    <label for="sound">
      <input type="checkbox" value="Yes" id="sound"> Yes
    </label>
  </p>

  <p>
    <strong>Do You want Flashes?</strong>
    <label for="flash">
      <input type="checkbox" value="Yes" id="flash">Yes
    </label>
  </p>

  <p>
    <strong>Do You want Text?</strong>
    <label for="text">
      <input type="checkbox" value="Yes" id="text">Yes
    </label>
  </p>
</div>

And here’s the accompanying CSS:

.wrapper3 p {
  display : inline-block;
  margin : 0;
  padding : 1em;
  border : none;
}

.wrapper3 label {
  display : block;
}

.wrapper3 input {
  color: #000;
}

By the way, you labeled the checkboxes with "Yes", but their values said "No". I’ve changed that in my code sample. Here’s a plnkr

Upvotes: 0

Fahad Hasan
Fahad Hasan

Reputation: 10506

You can easily achieve that by wrapping your paragraph and the checkbox inside a <div> along with changing the display property of your <p> tag to inline-block. Here's a demo:

p {
  display: inline-block;
}
<div class="wrapper3">
  <div>
    <p>Do You Want Sound ?</p>
    <input type="checkbox" value="No" style="color: Black;" id="sound">Yes</div>
  <div>
    <p>Do You want Flashes ?</p>
    <input type="checkbox" value="No" style="color: Black;" id="flash">Yes</div>
  <div>
    <p>Do You want Text ?</p>
    <input type="checkbox" value="No" style="color: Black;" id="text">Yes</div>
  <br />
</div>

Upvotes: 1

Related Questions