Align Checkboxes

Question

I want to align my checkboxes in my site and I did some search over the stackoverflow and I found some solution that couldn't help me to align me checkboxes as I want. The first solution-question and the second solution-question.

My checkboxes look like the image below...

The RED line is where I want all my checkboxes to be.

Here is the code for my checkboxes...

    <label id="Disease">Disease:</label><br />
    <!--emfanizei tis epiloges gia ta diseases me basi auta p exoume sti basi mas -->
    <?php
  $sql = "SELECT name FROM disease";
  $query_resource = mysql_query($sql);
  while( $name = mysql_fetch_assoc($query_resource) ):
?>
    <span><?php echo $name['name']; ?></span>
    <input type="checkbox" name="disease[]" value="<?php echo $name['name']; ?>" /><br />

<?php endwhile; ?>

Can you help me please?

Answer 1

Add the following CSS to your site:

label#Disease ~ span {
  display: inline-block;
  width: 180px;
}

That's giving the sibling spans that follow your label#Disease element a set width, which will push all the checkboxes to the right.

Play with the width to get it to your desired size, making sure you don't have text overflow or other issues.