在使用HTML代碼來設計登錄頁面時，對齊登錄表單元素是非常重要的。特別是當我們使用密碼和用戶名對齊時，美觀度就更為重要了。

為了對齊密碼和用戶名表單元素，我們需要將其放入同一行。html代碼如下：

<div class="login-form">
<label for="username">用戶名：</label>
<input type="text" id="username" name="username">
<label for="password">密碼：</label>
<input type="password" id="password" name="password">
</div>

在這段代碼中，我們使用了<div>標簽來將用戶名和密碼表單元素放入同一行。我們為該標簽定義了一個class名為“login-form”，以便在CSS中進行設計。

關鍵在于所謂的CSS設計。下面是一些常用的CSS樣式，可以讓我們更好地對齊我們的表單元素。

.login-form {
display: flex;
align-items: center;
}
.login-form label {
margin-right: 10px;
text-align:right;
width: 80px;
}
.login-form input {
width: 180px;
}

在這段CSS代碼中，我們使用了flexbox布局。這是一種非常流行的css樣式，可以讓我們在容器中對齊元素。我們還指定了輸入表單元素的寬度，以便它們可以根據我們的設計放在同一行上。

此外，我們還使用了 margin-right 和 text-align 屬性來控制label元素的與輸入元素之間的距離和對齊方式。最后，我們定義了一個固定寬度的標簽元素，以均衡用戶名與密碼的長度。

以上所述就是關于HTML密碼和用戶名對齊的代碼以及其樣式的基本介紹。