[英]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>  ";
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.