Question

我已经阅读了w3c标准指南，并指出对于基本表单创建，使用ul优于使用表格。在Firefox等中，下面显示的非常简单的代码在列表中创建了简单的文本/输入框对。

在Internet Explorer（Ie8,9）中，文本框在跨度下方和右侧出现~15px。

enter image description here

有人可以向我解释原因吗？我做错了什么？

<html>
<head>
    <style type="text/css">
        ul li input
        {
            width:70%;
            float:right;
        }
        ul
        {
            list-style: none;
            width:300px;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <span>Username:</span><input type="text" id="UserNameBox" />
        </li>
        <li>
            <span>Password:</span><input type="password" id="PasswordBox" />
        </li>
    </ul>
</body>

Answer 1

如果您希望输入正确浮动，则以下HTML应该有效：

<body>
    <ul>
        <li>
            <input type="text" id="UserNameBox" /><span>Username:</span>
        </li>
        <li>
            <input type="password" id="PasswordBox" /><span>Password:</span>
        </li>
    </ul>
</body>

Answer 2

<input>标记是自动关闭的，输入上的html语法错误。试试这个：

<ul>
    <li>
        <span>Username:</span><input type="text" id="UserNameBox" />
    </li>
    <li>
        <span>Password:</span><input type="password" id="PasswordBox" />
    </li>
</ul>

列出无序列表中的项目Internet Explorer

2 个答案: