在 PHP 中垂直从 SQL 中提取的位置数据

Question

我从 SQL 表中提取了用户数据，但我想像使用 ex 一样垂直定位数据。 表格单元格。 由于我是在 PHP 中执行此操作的，因此我无法弄清楚如何执行此操作。 另外，我想不出一种添加 CSS 的方法，所以我在整个'echo'中添加了一些内联 CSS。 这是我的代码：

<?php
    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "shopping_list_users";

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

    $sql = "SELECT id, username, name, surname FROM users";
    $result = $conn->query($sql);

    if ($result !== false && $result->num_rows > 0) {
        // output data of each row
        while($row = $result->fetch_assoc()) {
            echo "<p style='font-size: 2em; text-shadow: 0px 5px 12px #333333; text-align: left; font-size: 40px; margin: 30px; margin-top: 35px; font-weight: bold'>" . 
                 "ID: " . $row["id"]. "<br>",
                 "Username: " . $row["username"]. "<br>",
                 "Name: " . $row["name"]. "<br>",
                 "Surname: " . $row["surname"]. "<br>";
        }
    } else {
        echo "0 results";
    }
    $conn->close();
?>

这是它的样子

正如我所说，我想垂直对齐$row数据，在它们各自的“标题”（ID、用户名、姓名、姓氏）旁边。

Answer 1

这是使用表格确实合理的情况之一。 所以这样做：

while($row = $result->fetch_assoc()) {
    echo '<table>';
    echo "<tr><td>ID:</td><td>" . $row["id"]. "</td></tr>";
    echo "<tr><td>Username:</td><td>" . $row["username"]. "</td></tr>";
    echo "<tr><td>Name:</td><td>" . $row["name"]. "</td></tr>";
    echo "<tr><td>Surname:</td><td>" . $row["surname"]. "</td></tr>";
    echo '</table>';
}

或者，如果您真的想避免这种情况，请使用定义列表，如下所示：

while($row = $result->fetch_assoc()) {
    echo '<dl>';
    echo "<dt>ID:</dt><dd>" . $row["id"]. "</dd>";
    echo "<dt>Username:</dt><dd>" . $row["username"]. "</dd>";
    echo "<dt>Name:</dt><dd>" . $row["name"]. "</dd>";
    echo "<dt>Surname:</dt><dd>" . $row["surname"]. "</dd>";
    echo '</dl>';
}

关键是，如果没有额外的标记，您将无法实现您的目标。 而这两种方式才是正确的做法。

如果您没有使用 CSS 定义它，表格解决方案将自动使第一列适合最大元素的所需宽度（在您的情况下为“用户名：”）。 我对定义列表不太熟悉，但应该有适当的方法来使用 CSS 获得良好的解决方案。

编辑：要将<dt>和<dd>放在同一行， 请参见此处。