Question

我的项目完全正常，直到我插入图片标记，其中循环和复选框，标签和图像的位置出错。

见下图：

This is what happened when I tried to insert the img tag together with the checkbox and label

帮我解决这个问题，我想让照片按照3对齐。

这是生成源：

        <!DOCTYPE html>
        <html>
        <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="structure.css">
       </head>
       <body>


    <form action="another_sample.php" method="POST">

         <img class='img-foods' src='food_menu/25-07-17-1500971164.jpeg'><br><label><input type='checkbox' name='food[]' value ='100'>Asado</label><img class='img-foods' src='food_menu/25-07-17-1500971183.jpeg'><br><label><input type='checkbox' name='food[]' value ='100'>Broccoli</label><img class='img-foods' src='food_menu/25-07-17-1500971422.jpeg'><br><label><input type='checkbox' name='food[]' value ='100'>Stew</label><br><br><br><img class='img-foods' src='food_menu/25-07-17-1500971438.jpeg'><br><label><input type='checkbox' name='food[]' value ='100'>Teriyaki</label><img class='img-foods' src='food_menu/25-07-17-1500971452.jpeg'><br><label><input type='checkbox' name='food[]' value ='100'>Caldereta</label><img class='img-foods' src='food_menu/25-07-17-1500971463.png'><br><label><input type='checkbox' name='food[]' value ='100'>Kare-Kare</label><br><br><br><img class='img-foods' src='food_menu/25-07-17-1500971474.jpeg'><br><label><input type='checkbox' name='food[]' value ='100'>Lengua</label><img class='img-foods' src='food_menu/25-07-17-1500971496.jpeg'><br><label><input type='checkbox' name='food[]' value ='100'>Mongolian</label><img class='img-foods' src='food_menu/25-07-17-1500971508.jpeg'><br><label><input type='checkbox' name='food[]' value ='100'>Morcon Rolls</label><br><br><br><img class='img-foods' src='food_menu/25-07-17-1500971518.jpeg'><br><label><input type='checkbox' name='food[]' value ='100'>Roast Beef</label>        </form>

    </body>
    </html>

这是我创建的整个代码。

HTML，PHP

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="structure.css">
    </head>
    <body>
    <form action="another_sample.php" method="POST">
         <?php
            include "connection.php";
            $sql = "SELECT m.type, m.name, m.price, m.image, mt.name as 'type' FROM table_menu m LEFT JOIN table_menu_type mt ON m.type = mt.id WHERE m.type LIKE '%1%' ";
            $result = $con->query($sql);
            if ($result->num_rows > 0) {
                // output data of each row
                $x = 1;
                while($row = $result->fetch_assoc()) {  
                echo "<label><input type='checkbox' name='food[]' value ='". $row['price']."'>";
                echo  $row['name']."</label> <br>";
                echo "<img class='img-foods' src='food_menu/". $row['image'] ."'>";           
                $x++;
                  if($x > 3){
                       echo "<br>";
                        $x=1;
                        }                                                      
                 }
            } 
            else {
                echo "0 results";
            }
            $con->close(); 
            ?>
    </form>
    </body>
    </html>

Answer 1

您需要使用CSS设置HTML样式。此外，您需要将图像放在标签内。生成此标记：

         <label><img class='img-foods' src='http://via.placeholder.com/100x100'><br />
         <input type='checkbox' name='food[]' value ='100'>Asado</label>

         <label><img class='img-foods' src='http://via.placeholder.com/100x100'><br />
         <input type='checkbox' name='food[]' value ='100'>Broccoli</label>

         <label><img class='img-foods' src='http://via.placeholder.com/100x100'><br />
         <input type='checkbox' name='food[]' value ='100'>Stew</label>
         <br />

使用此CSS设置样式：

label {
  display: inline-block;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 10px;
  text-align: center;
}

所以你的PHP应该是这样的：

echo "<label><img class='img-foods' src='food_menu/". $row['image'] ."'><br /><input type='checkbox' name='food[]' value ='". $row['price']."'>";
echo  $row['name']."</label>";

了解它应该如何显示https://jsfiddle.net/uxmz9u4m/4/

循环复选框，标签和img在一起

1 个答案: