循環複選框，標籤和img在一起

我的項目工作完全正常，直到我插入圖像標籤，這是循環和複選框，標籤和圖像出錯的位置。循環複選框，標籤和img在一起

見下面這個圖片：

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>

來源

2017-07-25 Ryuumi Aiko

而問題是？ –

我希望輸出對齊3，但它不會這樣，因爲img標籤破壞了代碼...我在找一個知道問題出在哪裏的人。已經調試好了好幾個小時。 –

你需要使用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/

來源

2017-07-25 08:08:23 delboy1978uk

另一件事是，我使用PHP，從數據庫調用圖像....我可以在css上使用PHP？我是新手 –

只需粘貼您的循環生成的HTML，我們就可以將其排序 – delboy1978uk

我的HTML和PHP在一個頁面中，我發佈了它。往上看。 –

循環複選框，標籤和img在一起

回答

相關問題