設置登錄用戶名表單標記的樣式時遇到問題

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

結果將在右側提供一個堆疊的“用戶名/密碼”框。 在此處查看結果，您可能需要擴展結果部分以進行正確查看。