如何实现命令列表从左到右横向排列而非垂直堆叠？

要实现订单横向排列、满行自动换行的效果，需要从HTML结构重构和CSS布局设置两方面入手，以下是具体步骤和修改后的代码：

1. 重构代码结构（合并查询+独立包裹每个订单） #

当前代码重复执行相同SQL查询，且把所有订单号塞在同一个<li>中、状态单独输出为<p>，结构混乱导致无法横向排列。我们需要：

• 仅执行一次SQL查询，循环中同时输出每个订单的编号和状态
• 用独立容器包裹每个订单的完整内容

修改后的PHP/HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="refresh" content="5" />
    <link rel="stylesheet" type="text/css" href="css/test.css">
    <title>订单展示</title>
</head>
<body>
    <div class="orders-container">
        <?php
        $dsn="";
        $user="";
        $password="";
        $conn=odbc_connect($dsn,$user, $password);

        // 仅执行一次SQL查询
        $sql = <<<EOF
        SELECT enc_id, enc_cmd_num, enc_paye, enc_prepared, enc_ext_ref, enc_heure_fab_deb, enc_heure_fab_fin, Client.cli_civilite,Client.cli_nom, Client.cli_prenom 
        FROM Client RIGHT JOIN encaissement ON Client.cli_id = encaissement.enc_client 
        WHERE enc_etat<>4 AND enc_date= '20221229' AND ((DATEDIFF(n,enc_heure_fab_fin, getDate()) < 3 AND enc_prepared <> 0) OR enc_prepared = 0) AND enc_emporte <> 1 
        ORDER BY encaissement.enc_heure_fab_deb ASC
EOF;
        
        $results = odbc_exec($conn,$sql);

        if( $results )
        {
            while($resultrow = odbc_fetch_array($results))
            {
                // 每个订单用独立容器包裹
                echo '<div class="order-item">';
                    echo "<span class='cmdnum'>".$resultrow["enc_cmd_num"]."</span>";
                    switch($resultrow['enc_prepared'])
                    {
                        case 0:
                            echo"<p class='ENCOURS'>EN PREPARATION</p>";
                            break;
                        case 1:
                            echo "<p class='PRETE'>COMMANDE PRÊTE</p>";
                            break;
                    }
                echo '</div>';
            }
        }
        ?>
    </div>
</body>
</html>

2. 添加CSS实现横向流式布局 #

在css/test.css中添加以下样式：

/* 订单容器：使用Flexbox实现横向排列+自动换行 */
.orders-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* 订单之间的间距 */
    padding: 20px;
    max-width: 1200px; /* 可选：限制最大宽度，避免过宽 */
    margin: 0 auto; /* 居中显示 */
}

/* 单个订单的样式 */
.order-item {
    width: 180px; /* 固定每个订单的宽度，可按需调整 */
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 8px;
    text-align: center;
    background-color: #f9f9f9;
}

/* 订单编号样式 */
.cmdnum {
    display: block;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 8px;
}

/* 状态样式 */
.ENCOURS {
    color: #ff9800;
    margin: 0;
}

.PRETE {
    color: #4caf50;
    margin: 0;
}

效果说明 #

• display: flex让订单容器内的元素横向排列
• flex-wrap: wrap确保元素填满一行后自动换行
• gap属性控制订单之间的间距，替代传统margin更简洁
• 给单个订单设置固定宽度保证布局整齐，也可改用flex: 0 0 20%这类比例宽度实现响应式布局

内容的提问来源于stack exchange，提问作者user20722045