0
我想在我的第一個下面做第二個表單。問題是，我似乎無法移動第二個表格。我試過填充和邊緣在我的CSS。我在.label2＃input2和其他影響我的第二種形式的字段中做了這個。我似乎無法在我的css中爲＃form2添加屬性。我嘗試在＃form2 css中添加多個屬性，但沒有一個是相似的。我引用它與我的＃form1（其工作）完全相同的方式，所以我不確定爲什麼我在＃form2中的填充頂部不起作用。問題與水平左對齊形式
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
body {
background-image: url(/img/bamboo.png);
background-repeat:repeat-x;
background-color:black;
text-align:center;
}
#container {
margin:0 auto;
margin-top:0px;
width:920px;
height:920px;
text-align:left;
background-color:00000;
}
.twoCol {
height:55em;
margin:2%;
width:46%;
background-color:0000;
float:left;
}
#logo {
margin:0px;
float:left;
}
#whatis {
font-family: rockwell;
text-align:left;
font-size:1.4em;
padding-top:2em;
color:#cccccc;
}
#about {
font-family: rockwell;
letter-spacing:.1em;
line-height:1.3em;
text-align:left;
font-size:1.1em;
padding-top:.2em;
color:#ffff99;
}
#equal {
padding-top:1em;
padding-left: 9em;
}
#signup {
font-family:rockwell;
float:left;
font-size:1.5em;
padding-top:2em;
padding-bottom:100px;
color:#339900;
}
#form1 {
padding-top:6em;
width:450px;
}
#form2 {
width:450px;
}
#formleft {
float:left;
}
#formright {
float:right;
}
.label {
display:block;
margin-left:1em;
margin-bottom:-.3em;
font-size:.85em;
color:white;
font-family: Avenir;
text-shadow: px px px white;
}
.label2 {
margin-top:13px;
display:block;
margin-left:0em;
margin-bottom:0em;
font-size:1em;
color:white;
font-family: Avenir;
text-shadow: px px px white;
}
input {
font-family: Courier New;
font-size: 1em;
height:1.4em;
margin:2% 5% 5% 5%;
width:90%;
border-color:#555555;
-webkit-appearance: none;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 5px;
-moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
-webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
box-shadow: inset 0 3px 8px rgba(0,0,0,.24);
}
#input2 {
font-family: Courier New;
font-size: 1em;
height:1.4em;
margin:-4% 0% 0% 15%;
width:75%;
border-color:#555555;
-webkit-appearance: none;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 5px;
-moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
-webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
box-shadow: inset 0 3px 8px rgba(0,0,0,.24);
}
.inset {
-moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
-webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
box-shadow: inset 0 3px 8px rgba(0,0,0,.24);
}
button {
height:2em;
margin:0% 5% 5% 5%;
width:92%;
background-color:#00aeff;
font-size: 1.5em;
cursor: pointer;
-webkit-appearance: none;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border-color:#008aff;
-moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
-webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
box-shadow: inset 0 3px 12px rgba(0,0,0,.24);
text-shadow: 1px 1px 5px grey;
}
button:active {
position: relative;
top: 1px;
}
.submit input2{
margin-left: 1em;
}
text{
font-family: Avenir;
font-size: 1.5em;
}
</style>
</head>
<body>
<div id="container">
<div id="left" class="twoCol">
<div id="logo"><img src="/img/logo.png" height= "150px" width="257px" alt="">
<div id="whatis">
<p>What is Epic Swap?</p></div>
<div id="about">
<p>Epic Swap is the opportunity to share<br> an experience, make a friend and do<br> it all over again.</p></div>
<div id="equal">
<img src="/img/equal.png" height="56" width="100" alt=""></div>
</div>
</div>
<div id="right" class="twoCol">
<form id="form1">
<div id="formleft"><label class="label">Username:</label>
<input type="text" /></div>
<div id="formright"><label class="label">Password:</label>
<input type="text" /></div>
<div id="signup">
<p>Sign Up Now!!</p></div>
<form id="form2">
<p><label class="label2" for="name">Name</label2>
<input id="input2" type="text" id="name" /></p>
<p><label class="label2" for="e-mail">E-mail</label2>
<input id="input2" type="text" id="e-mail" /></p>
<p class="submit"><input type="submit" value="Submit" /></p>
</form>
</div>
</div>
</body>
</html>
http://jsfiddle.net/joplomacedo/BpgMn/第二種形式似乎是第一個下方。那裏有什麼問題？ – banzomaikaka
「名稱」標籤卡住頂部，未與輸入框對齊 – user1715285