设置登录用户名表单标记的样式时遇到问题

Question

看到这个jsfiddle 。

我想在无序列表右侧使用用户名和密码设置脚本登录表单的样式。

Answer 1

将容器包装在UL和表格两边，并为其指定固定宽度或最小宽度，以防止浮起（表格降落到ul以下并向左）。

http://jsfiddle.net/6e86p/

调整表单宽度，以确保2个字段垂直对齐（如在我的jsfiddle中）或水平对齐。 如果您需要使用表格宽度，则可能需要将每个标签/输入对以固定为div包裹，以确保每个标签与其输入在水平方向上对齐并且不会落在下方。

Answer 2

使用Control +鼠标滚轮可缩小结果窗格。 您会看到登录框在正确的位置。 无需更改！

Answer 3

首先，包装表单元素（为此我使用了dl）

<form action="/bin/process.php" method="post" enctype="multipart/form-data">
     <dl>
         <dt>
            <label>Username:</label>
         </dt>
         <dd>
<input type="text" value="" />
         </dd>
         <dt>
<label>Password:</label>
         </dt>
         <dd>
<input type="password" value="" />
         </dd>
         <dt></dt>
         <dd>
<input type="submit" value="Login" />
         </dd>
     </dl>
</form>

然后我添加了以下CSS

dt { width: 50px; float: left; }
dd { margin-left: 100px; }

结果将在右侧提供一个堆叠的“用户名/密码”框。 在此处查看结果，您可能需要扩展结果部分以进行正确查看。