Align Checkboxes

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?

---

Add the following CSS to your site:

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

That's giving the sibling span s 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.

---

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>

---

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>

链接地址: http://www.djcxy.com/p/41462.html

上一篇: Internet Explorer，Firefox和Chrome中的复选框对齐方式

下一篇: 对齐复选框