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

enter image description here

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?

Josh Burgess · Accepted Answer · 2015-05-05T14:25:53.193

6

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.

edited May 05 '15 at 14:25

answered May 05 '15 at 14:22

Josh Burgess

8,696
30
45

Thank you that works fine , I will accept you answer as soon as possible because I needs some time in order to accept an answer – Waaaaat May 05 '15 at 14:25
@DogFace – Glad to have helped! – Josh Burgess May 05 '15 at 14:26

score 2 · Answer 2 · answered May 05 '15 at 14:23

Why not wrap the inputs in labels, then float them to the right hand side? The advantage being you then are using the semantic label element instead of span, and can toggle the checkbox with a click on both the text and the input

input[type=checkbox] {
  vertical-align: middle;
  float: right;
}
label {
  display: block;
  overflow: hidden;
  width: 120px;
}

<label>Label
  <input type="checkbox" name="disease[]" />
</label>
<label>Label
  <input type="checkbox" name="disease[]" />
</label>
<label>Label
  <input type="checkbox" name="disease[]" />
</label>
<label>Label
  <input type="checkbox" name="disease[]" />
</label>
<label>Label
  <input type="checkbox" name="disease[]" />
</label>
<label>Label
  <input type="checkbox" name="disease[]" />
</label>

Thank you for your time :) I will try your solution just to see if it works because I already accept the other answer . Thank you again :) — Waaaaat, May 05 '15 at 14:28

score 0 · Answer 3 · answered May 05 '15 at 14:23

You can set a text-align:right css rule to the wrapper of the checkboxes.

Or, you can put the checkboxes into table cells like this:

<table>
  <tbody>
    <tr>
      <td>labelsdfsdf</td>
      <td><input type="checkbox"></td>
    </tr>
    <tr>
      <td>label</td>
      <td><input type="checkbox"></td>
    </tr>
    <tr>
      <td>label</td>
      <td><input type="checkbox"></td>
    </tr>
    <tr>
      <td>labelsdf sdfsdfsdf</td>
      <td><input type="checkbox"></td>
    </tr>
    <tr>
      <td>label</td>
      <td><input type="checkbox"></td>
    </tr>
  </tbody>
</table>

Align Checkboxes

3 Answers3