如何使所有输入盒直线排序？
我一直想要所有我的输入框直线排序，我一直在关注从一张图片制作一个网站，我想知道如何制作这样的盒子：
到目前为止，我的网站看起来像这样：
注意所有输入框看起来如何混乱和未对齐？我该怎么做才能让它看起来更干净？
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>int222_162d16 - Assignment 3 - Home Page</title>
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/sitecss.css" type="text/css" media="screen" />
</head>
<body>
<form action="https://zenit.senecac.on.ca/~emile.ohan/cgi-bin/cardApplication.cgi" method="post" id="application" name="application">
<fieldset>
<legend class="t"><img src="https://zenit.senecac.on.ca/~emile.ohan/int222/bank-logo.png"alt="Assignment #3" />Seneca Bank - Credit Card Application</legend>
<div class="clearfix">
<aside class="l">
<fieldset>
<legend>Primary Applicant's Information</legend>
First Name* <input type="text" name="fName" id="fName" size="20" maxlength="20" autofocus="autofocus"> <br />
Surname* <input type="text" name="sName" id="sName" size="20" maxlength="30"> <br />
Date of Birth* <input type="text" name="dob" id="dob" size="10" maxlength="9" placeholder="MMMDDYYYY"> <br />
Email Address* <input type="text" name="email" id="email" size="20" maxlength="60"> <br />
Phone No.* <input type="text" name="phone" id="phone" size="20" maxlength="12"> <br />
</fieldset>
</aside>
<section class="s">
<fieldset>
<legend>Primary Applicant's Address</legend>
Home Address* <input type="text" name="address" id="address" size="30" maxlength="60">
Apt. <input type="text" name="apt" id="apt" size="5" maxlength="4"> <br />
City* <input type="text" name="city" id="city" size="20" maxlength="40"> <br />
Province* <select id="province" name="province" size="2">
<optgroup label="Province">
<option value="">(Select a Province)</option>
<option value="Alberta">Alberta</option>
<option value="British Columbia">British Columbia</option>
<option value="Manitoba">Manitoba</option>
<option value="New Brunswick">New Brunswick</option>
<option value="Newfoundland & Labrador">Newfoundland & Labrador</option>
<option value="Nova Scotia">Nova Scotia</option>
<option value="Ontario">Ontario</option>
<option value="Prince Edward Island">PE</option>
<option value="Quebec">Quebec</option>
<option value="Saskatchewan">Saskatchewan</option>
</optgroup>
<optgroup label="Territory">
<option value="Northwest Territories">Northwest Territories</option>
<option value="Nunavut">Nunavut</option>
<option value="Yukon">Yukon</option>
</optgroup>
</select>
Postal Code* <input type="text" name="postal" id="postal" size="8" maxlength="7" placeholder="ANA NAN"> <br />
</fieldset>
</section>
<aside class="r">
<fieldset>
<legend>Housing Status</legend>
Do you <input type="checkbox" name="hStatus" id="s01" value="Own" />Own the property
<input type="checkbox" name="hStatus" id="s02" value="Rent" />Rent the property<br />
$Monthly Payment* <input type="text" name="payment" id="payment" size="8" maxlength="6"> <br />
Monthly Income* <input type="text" name="income" id="income" size="8" maxlength="6"> <br />
Years at current location* <input type="text" name="currYears" id="currYears" size="3" maxlength="2"> <br />
Pre-authorized Code* <input type="text" name="preCode" id="preCode" size="8"> <br />
</fieldset>
</aside>
</div>
<div class="clearfix">
<section class="s">
<fieldset>
<legend>Reserved - See below</legend>
<p><b>If you submit your application with errors and/or omissions, a list of errors and/or omissions will show here. Make the corrections and re-submit.</b></p>
<p><b>If you continue to have a problem submitting your application, make a note of the Reference No. and call us at 1-800-010-2000.</b></p>
</fieldset>
</section>
<aside class="l">
<fieldset>
<legend>Credit Check / Email Consent</legend>
I consent to have a credit check performed<br />
<input type="checkbox" name="creditCheck" id="c01" value="Yes" />Yes
<input type="checkbox" name="creditCheck" id="c02" value="No" />No
<br />
I consent to have email messages sent to me<br />
<input type="radio" name="emailConsent" id="m01" value="Yes" />Yes
<input type="radio" name="emailConsent" id="m02" value="No" />No
<br />
Submitted on : CURRENT Date
Ref. # <input type="text" name="refNo" id="refNo" size="8" readonly="readonly"> <br />
<!--Submit Application--> <input type="submit" value="Submit Application">
<!--Start Over--> <input type="reset" value="Start Over">
<input type="hidden" name="hName" id="hName" value="Mahmood"> <br />
<input type="hidden" name="hId" id="hId" value="int222_162d16"> <br />
</fieldset>
</aside>
</div>
</fieldset>
</form>
<footer class=f>
<a href="../">My zenit Account</a> <a href="javascript/">My JavaScript</a> <a href="css/">My CSS</a> <a href="honesty.html">My Honesty</a>
<script>
var dt=new Date(document.lastModified); // Get document last modified date
document.write('<p>This page was last updated on '+dt.toLocaleString()) + '</p>';
</script>
</footer>
</body>
</html>
CSS：
footer.f
{
text-align: center;
}
legend
{
border: 4px groove #ff0000;
background-color: #9999ff;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
padding: 15px;
text-shadow:0.1em 0.1em 0.01em #333;
}
legend.t
{
vertical-align: top;
}
fieldset
{
border-color:#F00;
border-style: solid;
}
html, body
{
max-width: 100%;
/*overflow-x: hidden;*/
margin:0;
}
aside.r
{
float: right;
width: 31%;
margin: 1%;
}
aside.l
{
float: left;
width: 31%;
margin: 1%;
}
section.s /*shadow on sections*/
{
width: 31%;
margin: 1%;
display: inline-block;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
2 个答案:
答案 0 :(得分：1)
HTML表格将为您完成所有对齐。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
<table>
<tr><td>First Name*</td>
<td><input type="text" name="fName" id="fName" size="20" maxlength="20" autofocus="autofocus"></td></tr>
<tr><td>Surname*</td>
<td><input type="text" name="sName" id="sName" size="20" maxlength="30"></td></tr>
<tr><td>Date of Birth*</td>
<td><input type="text" name="dob" id="dob" size="10" maxlength="9" placeholder="MMMDDYYYY"></td></tr>
<tr><td>Email Address*</td>
<td><input type="text" name="email" id="email" size="20" maxlength="60"></td></tr>
<tr><td>Phone No.*</td>
<td><input type="text" name="phone" id="phone" size="20" maxlength="12"></td></tr>
</table>
答案 1 :(得分：0)
使用HTML表格：
function joingid() {
var roomid = userlists["eo"][socket.username]["gid"];
socket.state = "playing";
socket.join(roomid);
socket.leave("lobby");
socket.leave("searching");
socket.emit("playerfound", {
gid: roomid
});
socket.broadcast.to(roomid).emit('playerjoined', {
usr: socket.username,
gid: roomid
});
userlists["g"][roomid] = {
"RoomID": roomid,
"Players": {},
"Creationdate": Date().toString(),
"Winner": null,
"currentPlayer": null,
"roundNR": 0
};
}
socket.on('playerhasjoined', function (data) {
socket.state = "playing";
socket.leave("lobby");
var roomid = userlists["eo"][socket.username]["gid"];
socket.broadcast.to(roomid).emit('otheropponent', {
usr: socket.username
});
setTimeout(function () {
populateDeck(roomid, "0", function () {
setTimeout(function () {
// lgp(function() {
// snddcks();
// });
populateDeck(roomid, "1", function () {
setTimeout(function () {
SP("gamepage.html", function FNCr(CALLBACKf) {
setTimeout(function () {
$(".gameid").html(roomid);
$(".opponent").html(opponent);
$(".giveupbutton").on('click', function () {
socket.emit('giveup');
});
$(".get_g_button").on('click', function () {
socket.emit('get_g', {
gid: roomid
});
});
$("#PAGETITLE").html("Da_Cards: VS " + opponent);
// socket.emit("rcvsrlst");
typeof CALLBACKf === 'function' && CALLBACKf();
}, 1500);
}, "aiI", roomid);
SCL("gamepage loaded", "", "aiI", roomid);
snddcks();
snddcks(true);
// console.error("THE ROOMID IS "+roomid.toString());
// lgp(roomid, function() {
// console.error("THE ROOMID IS "+roomid.toString());
// snddcks(true);
// });
}, 100);
});
}, 100);
});
}, 100);
});
function gCA(mode, i, im, roomid, plnr, callback) {
if (mode === "1r") {
return standardDeckCards[Math.floor(Math.random() * standardDeckCards.length)];
} else if (mode === "pop_onHand") {
if (i < im) {
var card = standardDeckCards[Math.floor(Math.random() * standardDeckCards.length)];
// var randI = "CID-"+(Math.floor((Math.random() * 1000000) + 1)).toString();
var randI = "CID_" + i.toString();
card["CID"] = randI;
// card["position"] = i;
userlists["g"][roomid]["Players"][plnr]["deck"]["onHand"].push(card);
userlists["g"][roomid]["Players"][plnr]["deck"]["onHand"][i]["position"] = i;
console.log("1_" + plnr + " :: " + userlists["g"][roomid]["Players"][plnr]["deck"]["onHand"][i]["CID"] + " with " + userlists["g"][roomid]["Players"][plnr]["deck"]["onHand"][i]["position"] + " and " + card["position"]);
// userlists["g"][roomid]["Players"][plnr]["deck"]["onHand"].push(socket.card);
// console.log((i+" and "+card["position"])+" and "+userlists["g"][roomid]["Players"][plnr]["deck"]["onHand"][i]["position"]+" and "+plnr);
i++;
setTimeout(function () {
gCA("pop_onHand", i, 5, roomid, plnr, callback);
}, 150);
} else if (i === im) {
setTimeout(function () {
gCA("pop_inBlock", 0, 50, roomid, plnr, callback);
}, 150);
}
} else if (mode === "pop_inBlock") {
if (i < im) {
var card2 = standardDeckCards[Math.floor(Math.random() * standardDeckCards.length)];
userlists["g"][roomid]["Players"][plnr]["deck"]["inBlock"].push(card2);
console.log(i + " :: " + userlists["g"][roomid]["Players"][plnr]["deck"]["inBlock"][i]["position"]);
i++;
setTimeout(function () {
gCA("pop_inBlock", i, 50, roomid, plnr, callback);
}, 150);
} else if (i === im) {
for (var j = 0; j < userlists["g"][roomid]["Players"][plnr]["deck"]["onHand"].length; j++) {
console.log("2_" + plnr + " :: " + userlists["g"][roomid]["Players"][plnr]["deck"]["onHand"][j]["CID"] + " with " + userlists["g"][roomid]["Players"][plnr]["deck"]["onHand"][j]["position"]);
}
setTimeout(function () {
typeof callback === 'function' && callback();
}, 50);
}
}
}
function gRC() {
return standardDeckCards[Math.floor(Math.random() * standardDeckCards.length)];
}
function gCA2(roomid, plnr, callback) {
userlists["g"][roomid]["Players"][plnr]["deck"]["onHand"];
}
function populateDeck(roomid, plnr, callback) {
userlists["g"][roomid]["Players"][plnr] = {
"Player": socket.username,
"deck": null,
"MP-Left": 20
};
// Hier könnten nachher dann noch die gekauften Karten und so eingefügt werden,
// bzw. dat vorgefertigte Deck usw.
userlists["g"][roomid]["Players"][plnr]["deck"] = {
"onHand": [],
"onField": [],
"inBlock": []
};
// gCA("pop_onHand", 0, 5, roomid, plnr, callback);
var k1 = 0;
(function loop1() {
if (k1 < 5) {
userlists["g"][roomid]["Players"][plnr]["deck"]["onHand"].push(gRC());
userlists["g"][roomid]["Players"][plnr]["deck"]["onHand"][k1]["position"] = k1;
k1++;
loop1();
} else {
var k2 = 0;
(function loop2() {
if (k2 < 50) {
userlists["g"][roomid]["Players"][plnr]["deck"]["inBlock"].push(gRC());
k2++;
loop2();
} else {
var k3 = 0;
(function loop3() {
if (k3 < 5) {
userlists["g"][roomid]["Players"][plnr]["deck"]["onHand"][k3]["position"] = k3;
k3++;
loop3();
} else {
setTimeout(function () {
typeof callback === 'function' && callback();
}, 50);
}
}());
}
}());
}
}());
}
function snddcks(oppo) {
var oppo = oppo || false;
var roomid = userlists["eo"][socket.username]["gid"];
if (userlists["g"][roomid]["Setup"] === false) {
var k5 = 0;
(function loop5() {
if (k5 < 5) {
userlists["g"][roomid]["Players"][0]["deck"]["onHand"][k5]["position"] = k5;
k5++;
loop5();
} else {
var k6 = 0;
(function loop6() {
if (k6 < 5) {
userlists["g"][roomid]["Players"][1]["deck"]["onHand"][k6]["position"] = k6;
k6++;
loop6();
} else {
setTimeout(function () {
typeof callback === 'function' && callback();
}, 50);
}
}());
}
}());
userlists["g"][roomid]["Setup"] = true;
}
if (oppo === true) {
socket.broadcast.to(roomid).emit('snddcks', {
"d0_MP-Left": userlists["g"][roomid]["Players"][1]["MP-Left"],
"d0_onHand": userlists["g"][roomid]["Players"][1]["deck"]["onHand"],
"d0_onField": userlists["g"][roomid]["Players"][1]["deck"]["onField"],
"d0_inBlockC": userlists["g"][roomid]["Players"][1]["deck"]["inBlock"].length,
"d1_MP-Left": userlists["g"][roomid]["Players"][0]["MP-Left"],
"d1_onHand": userlists["g"][roomid]["Players"][0]["deck"]["onHand"].length,
"d1_onField": userlists["g"][roomid]["Players"][0]["deck"]["onField"],
"d1_inBlockC": userlists["g"][roomid]["Players"][0]["deck"]["inBlock"].length,
});
console.log("Sent decks into " + roomid);
} else if (oppo === false) {
socket.emit('snddcks', {
"d0_MP-Left": userlists["g"][roomid]["Players"][0]["MP-Left"],
"d0_onHand": userlists["g"][roomid]["Players"][0]["deck"]["onHand"],
"d0_onField": userlists["g"][roomid]["Players"][0]["deck"]["onField"],
"d0_inBlockC": userlists["g"][roomid]["Players"][0]["deck"]["inBlock"].length,
"d1_MP-Left": userlists["g"][roomid]["Players"][1]["MP-Left"],
"d1_onHand": userlists["g"][roomid]["Players"][1]["deck"]["onHand"].length,
"d1_onField": userlists["g"][roomid]["Players"][1]["deck"]["onField"],
"d1_inBlockC": userlists["g"][roomid]["Players"][1]["deck"]["inBlock"].length,
});
console.log("Sent decks to " + socket.username);
}
setTimeout(function () {
fs.writeFileSync("userlistsLOG.log", Date().toString() + ":\n" + JSON.stringify(userlists["g"][roomid]["Players"][0]["deck"]["onHand"]) + "\n\n", {
flag: "a"
})
// fs.writeFileSync("userlistsLOG.log", Date().toString()+":\n"+JSON.stringify(userlists["g"][roomid]["Players"][0]["deck"])+"\n\n", {flag:"a"});
// fs.writeFileSync("userlistsLOG.log", Date().toString()+":\n"+JSON.stringify(userlists["g"][roomid]["Players"][1]["deck"])+"\n\n", {flag:"a"});
}, 500);
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？