Question

我正在尝试创建一个包含多个复选框的表单。复选框是从数据库动态创建的，但它们总是在新行中创建，而我希望它们并排排列。我是CSS和php / mysql的新手，所以我无法正确使用它。你能帮我吗？

$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> &nbsp";
                        echo " ".$row['slot_time'];
                        $date = $date1;
                    ?>
                    <input type="checkbox" name="bookings[]" value="1"></label></div><?php endwhile;
                    }
                    }
                    ?>

Answer 1

复选框周围的div是块级元素（生成新行），您可能希望使用span（这是一个内联级别元素）或者使用内联/内联块元素或浮动它们，选择是你的：）

style="display:inline"或style="display:inline-block"或<span>代替<div>

Answer 2

在div中添加一个类，或者如果有父类，则将其作为特定目标。

在你的css中使用：

div.yourclass {
   display:inline-block
}

示例：http://jsfiddle.net/pveez/

使用display:inline-block可以保留包裹在div中的好处（假设您出于某种原因这样做），同时让元素显示内联，或者“浮动”在彼此旁边。< / p>

避免使用其他答案所暗示的内联样式。

Answer 3

add style =“float：left”;给他们

<div style="float:left;">

还有其他方法，比如把它们放在桌子里。或者只是添加class=""，然后让设计师按照他想要的方式对其进行格式化。

Answer 4

具有display:inline-block的div并将宽度设置为100 / count％。通过4个复选框，您可以将它们与width:25%很好地分配。

当我在php中动态创建它们时，如何并排对齐复选框？

4 个答案: