0

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

在 Internet Explorer (Ie8, 9) 中，文本框出现在跨度下方和右侧约 15px 处。

在此处输入图像描述

有人可以向我解释为什么吗？我究竟做错了什么？

<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>

4

2 回答 2

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>
于 2012-08-20T16:21:22.713 回答
0

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

<ul>
    <li>
        <span>Username:</span><input type="text" id="UserNameBox" />
    </li>
    <li>
        <span>Password:</span><input type="password" id="PasswordBox" />
    </li>
</ul>
于 2012-08-20T16:20:28.500 回答