I m trying to create a form with multiple checkboxes. The checkboxes are dynamically created from a database but they are always created in a new line while I want them to be aligned side by side. I am new to CSS and php/mysql so I m unable to get it right. Can you help me out?
$mysqli = new mysqli('localhost', 'mechuser', 'mypassword', 'mechug_lab');
$query = "SELECT * FROM slots WHERE lab_id = '530_335' AND slot_status = '0' AND expt_id='3'";
$result=mysql_query($query);
if($result) {
if(mysql_num_rows($result) != 0) {
$date = "0000-00-00";
while($row = mysql_fetch_array($result)):
?>
<div><label><?php
$date1 = $row['date'];
$weekday = date('D', strtotime($date1));
$today = date('M j, Y',strtotime($date1));
if ($date1 != $date)
echo "<strong>".$today." ".$weekday."</strong>  ";
echo " ".$row['slot_time'];
$date = $date1;
?>
<input type="checkbox" name="bookings[]" value="1"></label></div><?php endwhile;
}
}
?>
The div around your checkboxes are block level elements (which makes new lines), you may want to use span (which is an inline level element) instead or make the inline / inline-block elements or float them, the choice is yours :)
style="display:inline"
or style="display:inline-block"
or <span>
instead of <div>
add style="float:left"; to them
<div style="float:left;">
there are other ways to, like putting them in a table. Or just adding them a class=""
, and then let the designer format it the way he wants.
Add a class to your div, or target it with specificity if there is a parent.
In your css use:
div.yourclass {
display:inline-block
}
Example: http://jsfiddle.net/pveez/
Using display:inline-block
allows you to retain the benefits of wrapping in a div
(assuming you did this for a reason) while getting the elements to display inline, or "float" next to eachother.
Avoid using inline styles like the other answers are suggesting.