Question

我正在使用<ul>标签创建一个尚未完成的表单。我到目前为止的HTML是这样的：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Contact &mdash; Schwiesow &amp; Drilias</title>
        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />

        <link rel="stylesheet" href="res/css/reset.css" />
        <link rel="stylesheet" href="res/css/main.css" />

        <script src="res/js/libraries/jquery.js"></script>
    </head>
    <body>
        <div id="bg_img"></div>
        <div id="toolbar">
            <div id="navigation_button">
                <a href="#main_navigation" id="open_nav">&equiv;</a>
                <a href="#" id="close_nav">&equiv;</a>
            </div>
            <div id="title">
                <img src="res/images/logo.sd.png" alt="Schwiesow &amp; Drilias" />
            </div>
        </div>
        <nav id="main_navigation">
            <span class="header">Schwiesow &amp; Drilias</span>
            <a href="/m/sd/">Profile</a>
            <a href="/m/sd/projects/">Projects</a>
            <a href="/m/sd/press.html">Press</a>
            <span class="header">The Garden Room</span>
            <a href="/m/gr/">Profile</a>
            <a href="/m/gr/press.html">Press</a>
            <span class="spacer"></span>
            <a href="/m/sd/contact.php">Contact</a>
        </nav>
        <div id="content">
            <ul>
                <li class="input"><input type="text" name="name" placeholder="Name" /><li>
                <li class="input"><input type="email" name="email" placeholder="Email" /></li>
                <li class="message"><textarea name="message" placeholder="Message"></textarea></li>
                <li class="button"><input type="submit" value="Send" name="submit" /></li>
            </ul>
        </div>
    </body>
</html>

出于某种原因，Safari和Chrome在第一个之后插入一个随机<li></li>。这是截图。 enter image description here

它非常烦人，因为它会在第一个和第二个<li>之间产生很大的空间，因为样式设置为height: 50px;

Answer 1

此行缺少终止＆＃34; /＆＃34;关闭<li>代码

<li class="input"><input type="text" name="name" placeholder="Name" /><li>

您的浏览器正在为您终止它，以及您首先应该终止的浏览器。

Answer 2

第一个<li>没有结束标记。它是<li><li>而不是<li></li>

浏览器生成的随机<li>标记</li>

2 个答案: