如何使用CSS對齊 - 初學者請求

我剛剛開始學習HTML和CSS，我想嘗試創建登錄頁面。我已經設法制作了一些非常基本的東西，但輸入框和標籤沒有對齊，看起來不專業。如果可能的話，我想就如何使用CSS修復此問題提出建議。如何使用CSS對齊 - 初學者請求

這裏是我的代碼：

<br /> UserName: 
 
<input type="text" name="user name" size="15" /> 
 
<br /> Password: 
 
<input type="text" name="password" size='15' /> 
 
<input type="text" hidden name="Password" size="15" /> <br /> 
 
<input type="reset" value="Login" /> 
 
<input type="submit" value="Cancel" />

https://jsfiddle.net/nxgm33y7/8/

來源

2017-03-18 Lyra

通過對齊你在屏幕或什麼的中間是什麼意思？ –

您可能需要更改您的標記一下，讓你得到一些空間來玩弄你的元素定位。我在這裏創建了一個簡單的示例，確保使用類和ID來選擇元素。

我在下面做的是，將所有元素包裝在一個div元素中，將其視爲一個包裝，這樣，無論何時您想要將頁面移動到頁面中間，您都可以輕鬆地這樣做。

接下來，我使用ul和li元素，這將幫助您將每個表單字段呈現爲一個在另一個之下。接下來，我們使用label標籤，以便您可以爲它們設置一些默認的width，並且表單元素將保持對齊。

最後，我使用這個選擇器ul li:last-child input:first-child，您可以安全地用一個簡單的class來代替它。它用於推動您的第一個button，即登錄與其他表單元素對齊。

ul { 
 
    list-style-type: none; 
 
} 
 

 
ul li { 
 
    margin-bottom: 10px; 
 
} 
 

 
ul li:last-child input:first-child { 
 
    margin-left: 85px; 
 
} 
 

 
label { 
 
    width: 80px; 
 
    display: inline-block; 
 
}

<div> 
 
    <ul> 
 
    <li> 
 
     <label for="username">Username</label> 
 
     <input type="text" name="username" id="username"> 
 
    </li> 
 
    <li> 
 
     <label for="password">Password</label> 
 
     <input type="text" name="password" id="password"> 
 
    </li> 
 
    <li> 
 
     <input type="reset" value="Login" /> 
 
     <input type="submit" value="Cancel" /> 
 
    </li> 
 
    </ul> 
 
</div>

來源

2017-03-18 05:55:07

這是更好地使用Bootstrap爲更專業的外觀和它給響應式佈局。無論如何，在這裏我使用正常的CSS。請檢查小提琴：https://jsfiddle.net/NayanaDas/5zg2qqum/。試試這個：

HTML：

<body> 

    <br /> 
    <div class="form-group"> 
    <label style="width:50%;">UserName:</label> 
    <input type="text" name="user name" size="15" class="form-input"/> 
    </div> 

    <br /> 
    <div class="form-group"> 
    <label style="width:50%;">Password:</label> 
    <input type="text" name="password" size='15' class="form-pswd"/> 
    <input type="hidden" name="Password" size="15" /> <br /> 
    </div> 

    <br> 
    <div align="center" style="width:100%;"> 
    <input type="reset" value="Login" /> 
    <input type="submit" value="Cancel" /> 
</div> 
</body>

CSS：

.form-group{ 

    width:100%;margin-left:5%; 
} 

.form-input{ 
    width:50%;margin-left:5%; 
} 

.form-pswd{ 
    width:50%;margin-left:6%; 
}

來源

2017-03-18 06:05:54

如何使用CSS對齊 - 初學者請求

回答

相關問題