如何阻止<li>元素重叠？

Question

这是我的代码

ul li{
    display:inline;
  }
li {

    padding: 10px;
    border: 1px solid brown;
    margin-right: 5px;
    position: relative;
    background-color: Bisque ;
}

<div class="fr_station">
        <span id="route">
    <?php
    // print_r($route);

    $pLine = 0;
    $cLine = 0;
    echo "<ul>";
    foreach ($route as $value) {

        $result = mysqli_query($conn,'select station,line,stnCode from stn_name where stnCode='.$value.' LIMIT 1') or die(mysqli_error());
        $res = mysqli_fetch_array($result);
        echo "<li>".$res['station']."</li>";
         //echo str_repeat("&nbsp;", 3); 

        if (!isset($previous)) {
            $previous = $source;
            $present = $source;
        } else {
            $current = $value;
            $d_result = mysqli_query($conn,'SELECT * FROM alt_station_data WHERE stnCode ='.$previous.' AND nei='.$current.' LIMIT 1');
            $d_res = mysqli_fetch_array($d_result);
            $tot_dist += $d_res['dis'];
            $previous = $value;
            echo "</tr>";
            $floored = floor($tot_dist);
        }

    }
    echo "</ul>";
    echo "</span>";
    echo "<br>";
    echo "</div>";

当我打印元素时，第二行的元素与第一行的元素重叠，依此类推，在行的末尾，它在一行上打印一半内容，在下一行上打印剩余内容。

Answer 1

尝试一下：

li {
    display: inline-block;
}

每个inline使用li的行为就像一个单词，因此没有它自己的“盒子”。 inline-block让他们并排坐着，但给每个人一个自己的“盒子”。

如果您需要更多控制权，然后开始查看弹性框：https://css-tricks.com/snippets/css/a-guide-to-flexbox/和https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout，但不要忘记，您将需要flex-wrap: wrap

请注意，在您的示例中，如果您只提供输出的HTML而没有php代码，则将更加容易，因为这不是必需的。 ：）