-3
我是網絡開發新手，我一直在嘗試對此進行排序。我仍然無法獲得一些正確對齊（居中）的HTML表單。一個簡單的交友網站的CSS
粘貼下面是HTML和CSS代碼。
請替我還建議如何使這一點點的互動。我知道很少的Javascript（鼠標懸停，點擊）。
fieldset {
background: lightyellow;
border: 10px solid yellow;
margin-bottom: 10px;
width: 720px;
}
label {
width: 180px;
display: inline-block;
text-align: right;
text-align: top;
}
label[for = "contact"] {
width: auto;
}
label[for = "height"] {
text-align:center;
}
label[for = "sal"] {
text-align:center;
}
textarea {
width: 360px;
height: 50px;
}<!DOCTYPE HTML>
<html lang="en">
<meta charset="utf-8">
<head>
<title>
Dating Website
</title>
<link rel="stylesheet" href="dating.css">
</head>
<h1>Simple Dating Website</h1>
<body>
<form>
<fieldset>
<legend>Your Face</legend>
<br>
<label for="avatar">Your Image:</label>
<input type="file" accept="image/*">
<br>
<label for="image">Image Preview:</label>
<img id="image" />
</fieldset>
</form>
<br>
<form>
<fieldset>
<legend>Your General Details</legend>
<br>
<label for="name">Name:</label>
<input type="text" accept="text/plain">
<br>
<label for="gender">Gender:</label>
<input type="radio" required>Male<input type="radio" required>Female
<br>
<label for="age">Age:</label>
<input type="number" required name="age" value="">
<br>
<label for="dob">Date of Birth:</label>
<input type="date" name="bday">
<br>
<label for="color">Favorite Color:</label>
<input type="color" name="Color">
<br>
<label for="country">Which Country:</label>
<label for="country_name"></label>
<input id="country_name" name="country_name" type="text" list="country" />
<datalist id="country">
<option value="Afghanistan">
<option value="Albania">
<option value="Algeria">
<option value="Andorra">
<option value="Angola">
<option value="USA">
<option value="India">
</datalist>
</fieldset>
</form>
<br>
<form>
<fieldset>
<legend>Your Indicators</legend>
<br>
<label for="height">Height:</label>
Short<input id="slider1" type="range" min="0" max="100" step="10" />Tall
<br>
<label for="sal">Salary:</label>
Rich<input id="slider1" type="range" min="0" max="100" step="10" />Poor
</fieldset>
</form>
<br>
<form>
<fieldset>
<legend>Your Contact Information</legend>
<br>
<label for="email">Email:</label>
<input type="email" name="email" required placeholder="Enter a valid email address">
<br>
<label for="mobile">Mobile:</label>
<input type="tel">
<br>
<label for="add">Address:</label>
<textarea></textarea>
<br>
<label for="contact">Method to contact you:</label>
<input type="checkbox">Email<input type="checkbox">WhatsApp<input type="checkbox">InAppChat
</fieldset>
</form>
</body>
<br>
<input type=submit value=Submit>
</html>
你需要具體瞭解你所要求的。 –
@alok免費檢出https://www.codecademy.com/learn for HTML，CSS，Javascript，jQuery教程。刷上你的基礎知識 –
你的問題是什麼？而你的代碼片段太長，請編輯成一個MCVE：http://stackoverflow.com/help/mcve – kebs