Question

我想稍微修饰一下我的代码..本页面是对数据库中存在的数据进行可视化的摘要，我希望这样做不仅可以查看每列一个按钮，而且我希望确保确保按照精确的图形顺序在列中放置5个按钮..在我看来，更合适的解决方案是使用..我实现了所有操作，并且按钮以正确的方式动态创建..唯一的是我每次在新行上打印一个按钮...有人知道如何将5/4按钮放在一行上并告诉他们自动换行吗？我附上我的成绩照片..

<!DOCTYPE html>
<?php 
    session_start();
    if(!isset($_SESSION["username"])){
        header('location: ../../../index.php');
    }else
    {

?>
<?php
$servername = "localhost";
$username = "root";
$password = "Salc!2018";
$dbname = "my_progettocantiere";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$sql = "SELECT idCantiere,nomeCantiere,codiceCommessa,indirizzoCantiere FROM Cantiere";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // output data of each row
    echo'<br><br><br>';
    int $cont = 0;
        echo '<table align="center" border="0px" width = "1300px">';
        echo '<tr align="center">';
        while($row = $result->fetch_assoc()) 
        {
        if($cont == 5)
        {
        echo '<td><a class="myButton" href="sceltaOperazione.php?idCantiere=' . $row["idCantiere"] . '">' . $row["nomeCantiere"] . '</a></td>';
        }
        else
        {
        echo '<tr><td><a class="myButton" href="sceltaOperazione.php?idCantiere=' . $row["idCantiere"] . '">' . $row["nomeCantiere"] . '</a></td></tr>';

        }

$cont++;
echo'</tr>';
        echo '</table>';


    echo'<br><br><br>';
        echo '<table align="center" border="1px" width = "1300px">';
        echo '<tr><td align="center" bgcolor="000035">';
        echo '<a href="../../pagineHtml/inserimento/inserimentoGenerale/inserimentoCantiere.php" class="myButton" alt="Nuovo Cantiere +">Nuovo Cantiere +</a>';
        echo '</tr></td>';
        echo '</table>';

} else {
    echo "0 results";
}
//$idCantiere = $_POST["idCantiere"];



$conn->close();
?>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Progetto Cantiere</title>
    <!-- Bootstrap -->
    <link href="../paginaIniziale/css/bootstrap-4.0.0.css" rel="stylesheet">
  </head>
    <style>

    .myButton {
    -moz-box-shadow:inset 0px 1px 0px 0px #000035;
    -webkit-box-shadow:inset 0px 1px 0px 0px #000035;
    box-shadow:inset 0px 1px 0px 0px #000035;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #000035), color-stop(1, #000035));
    background:-moz-linear-gradient(top, #000035 5%, #000035 100%);
    background:-webkit-linear-gradient(top, #000035 5%, #000035 100%);
    background:-o-linear-gradient(top, #000035 5%, #000035 100%);
    background:-ms-linear-gradient(top, #000035 5%, #000035 100%);
    background:linear-gradient(to bottom, #000035 5%, #000035 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000035', endColorstr='#000035',GradientType=0);
    background-color:#ffffff;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #000035;
    border:1px solid #000035;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:28px;
    font-weight:bold;
    padding:32px 76px;
    text-decoration:none;
    text-shadow:0px 1px 0px #1570cd;
}
.myButton:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #000035), color-stop(1, #000035));
    background:-moz-linear-gradient(top, #000035 5%, #000035 100%);
    background:-webkit-linear-gradient(top, #000035 5%, #000035 100%);
    background:-o-linear-gradient(top, #000035 5%, #000035 100%);
    background:-ms-linear-gradient(top, #000035 5%, #000035 100%);
    background:linear-gradient(to bottom, #000035 5%, #000035 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000035', endColorstr='#000035',GradientType=0);
    background-color:#000035;
}
.myButton:active {
    position:relative;
    top:1px;
}

    </style>

  <body>
<table align="center">
  <tr >
  <br><br><br><br><br><br><br><br><br>
                </td>
                <td style=" border-style: none" colspan="19"> <img src="../../../login/images/logo.jpg"  width="300px"  height="100px" alt="Logo SALC.SPA"></td>
            </tr>
            </table>
  </body>
</html>
<?php } ?>

我要附上我的成绩照片。

Screen

Answer 1

您可以使用CSS网格或flexbox，将按钮放在div内并对其设置样式：

div {
  display: flex;
}

您还可以查看本指南以了解其工作原理，并学习一些有用的属性以更好地对其进行自定义：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

while($row = $result->fetch_assoc()) {
        echo '<table align="center" border="0px" width = "1300px">';
        echo '<tr align="center">';
        echo '<td><a class="myButton" href="sceltaOperazione.php?idCantiere=' . $row["idCantiere"] . '">' . $row["nomeCantiere"] . '</a></td>';
        echo'</tr>';
        echo '</table>';
}

将除<td>行之外的所有内容移动到while循环之外。当前您为数据库中的每一行创建一个新表。通过将所有内容移出，您将改为为每行创建一个新列。

如何动态创建n个列？

2 个答案: