簡體   English   中英

在 php 中動態創建復選框時,如何並排對齊復選框?

[英]How do I align checkboxes side by side while I dynamically create them in php?

我正在嘗試創建一個帶有多個復選框的表單。 復選框是從數據庫動態創建的,但它們總是在新行中創建,而我希望它們並排對齊。 我是 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;
                    }
                    }
                    ?>

復選框周圍的 div 是塊級元素(它創建新行),你可能想要使用 span(它是一個內聯級元素),或者使內聯/內聯塊元素或浮動它們,選擇是你的:)

style="display:inline"style="display:inline-block"<span>而不是<div>

將一個類添加到您的 div 中,或者如果有父類則以特定的方式定位它。

在你的 css 中使用:

div.yourclass {
   display:inline-block
}

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

使用display:inline-block可以讓您保留包裝在div的好處(假設您這樣做是有原因的),同時讓元素內聯顯示,或“浮動”到彼此旁邊。

避免使用其他答案建議的內聯樣式。

添加樣式=“浮動:左”; 給他們

<div style="float:left;">

還有其他方法,比如把它們放在桌子上。 或者只是給它們添加一個class="" ,然后讓設計者按照他想要的方式對其進行格式化。

帶有display:inline-block div 並將寬度設置為 100/count %。 使用 4 個復選框,您可以將它們很好地分布在width:25%

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM