Question

...动态插入时。我不会直觉这一点，并且很难相信这是预期的行为，但是当我通过使用JavaScript更改其显示来动态插入列表元素时，它们会显示乱序。这张照片总结了它。

这是预期还是错误？

与显示类型匹配的代码：

<html>
<body>
<div>
    <form method="post" action="customer_login.php">
        <table width='500' align='center' bgcolor='skyblue'>
            <tr align='center'>
                <td colspan ='4'><h2>Login/Register to Proceed</h2></td>
            </tr>   

            <tr>
                <td align='right'><b>Email:</b></td>
                <td><input type='text' placeholder='Enter Email' name='c_email'/></td>
            </tr>

            <tr>
                <td align='right'><b>Password:</b></td>
                <td><input type='password' name='pass' placeholder="Enter Password"/></td>
            </tr>

            <tr align='center'>
                <td colspan='4'><input type='submit'  value="Login" name="login"/></td>
            </tr>
        </table>
            <h2 style=' float:center;padding:10px;'><a href='customer_register.php' style='text-decoration:none;'> Don't have an account?</a></h2>
    </form>
</div>
</body>
</html>


<?php
    if(isset($_POST['login'])){
    include("includes/db.php");
    $username = strip_tags($_POST['c_email']);
    $password = strip_tags($_POST['pass']);

    $username = stripslashes($username);
    $password = stripslashes($password);

    $username = mysqli_real_escape_string($username);
    $password = mysqli_real_escape_string($password);

    $sql = "select * from customer where customer_email ='$username' LIMIT 1";
    $query_login = mysqli_query($con, $sql);
    $row = mysqli_fetch_array($query_login);
    $email = $row['customer_email'];
    $db_pass = $row['customer_pass'];

    if($password==$db_pass){
        $_SESSION['customer_email'] = $email;
        header("Location:index.php");
    }else{
        echo "<h2 style='color:red;'>Wrong Email/Password!</h2>";
    }
        }
?>

一个解决方案会导致此问题：

Answer 1

这可能与将span置于ul内，这是无效的HTML。

<ul>

允许的内容：

零个或多个<li>元素，最终与<ol>和<ul>元素混合。

来源：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul

如果您需要创建列表项的子组，请嵌套列表。

<ul>
    <li>...</li>
    <li>...</li>
    <li>
        <ul>
            <li>...</li>
            <li>...</li>
        </ul>
    </li>
    <li>...</li>
</ul>

更新（根据评论和修订后的问题）

在导航屏幕截图中，下边距的间隙可能由display: inline-block引起。

以下是两种删除它的方法：

将display值更改为block
将vertical-align: bottom添加到规则

有关解释和其他方法，请参阅此帖：

inline-block boxes not fitting in their container

Answer 2

其中有两个不同的菜单类：.user-menu（在span标记中）和.top-menu（包括所有项目，也包括span）。可能他们有不同的CSS ...而且使用那个跨度有点奇怪......

列表元素正在按顺序显示

2 个答案: