我在Codepen中创建了一个表单，对它满意后，就输入了我的html和CSS作为横幅和导航，但是现在有些东西干扰了我的表单。有人可以向我指出我该怎么做才能使我的表格返回到以前的状态。
这是我的表单代码，不包含横幅和导航信息。
HTML：
<!-- Form End -->
<div class="form-share">
<form action="/my-handling-form-page" method="post">
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name" placeholder="Your Name"/>
</div>
<div>
<label for="mail">E-mail:</label>
<input type="email" id="mail" name="user_mail" placeholder="email@gmail.com"/>
</div>
<div>
<label for="msg">Message:</label>
<textarea id="msg" name="user_message" placeholder="Tell us about your story!"></textarea>
</div>
<div class="button">
<button type="submit">Send your message</button>
</div>
</form>
</div> <!-- Form End -->
CSS：
.form-share {
margin-top: 50px;
margin-bottom: 50px;
}
form {
/* Just to center the form on the page */
margin: 0 auto;
width: 400px;
/* To see the outline of the form */
padding: 1em;
border: 1px solid #CCC;
border-radius: 1em;
}
form div + div {
margin-top: 1em;
}
label {
/* To make sure that all labels have the same size and are properly aligned */
display: inline-block;
width: 77px;
text-align: right;
}
input, textarea {
/* To make sure that all text fields have the same font settings
By default, textareas have a monospace font */
font: 1em sans-serif;
/* To give the same size to all text field */
width: 300px;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* To harmonize the look & feel of text field border */
border: 1px solid #999;
}
input:focus, textarea:focus {
/* To give a little highlight on active elements */
border-color: #000;
}
textarea {
/* To properly align multiline text fields with their labels */
vertical-align: top;
/* To give enough room to type some text */
height: 5em;
/* To allow users to resize any textarea vertically
It does not work on all browsers */
resize: vertical;
}
.button {
/*margin: 0 auto;*/
padding-left: 77px;
padding-right: 16px;
}
button[type=submit] {
-webkit-appearance: none;
-moz-appearance: none;
display: block;
margin: 1.5em 0;
font-size: 1em;
line-height: 2.5em;
color: #333;
font-weight: bold;
height: 2.5em;
width: 100%;
background: -moz-linear-gradient(top, rgb(204,233,250) 0%, rgb(214,119,126) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(204,233,250)), color-stop(100%,rgb(214,119,126)));
-webkit-border-radius: 10px;
-moz-border-radius: 10px; border-radius: 10px;
}
button:hover {
cursor: pointer;
}
这是我的页面的代码，其中包含表单，横幅和导航。
HTML：
<div class="container">
<header>
<!--<img class="banner" src="images/banner2.png"> -->
<img class="banner" src="https://s16.postimg.org/d1ma252ol/banner2.png">
<!-- <div class="gender">
<h3> Gender Identity </h3>
</div> -->
</header>
<div id="wrap">
<div id="tabwrap">
<ul id="tabs">
<li >
<a href="#terms" class="cyan"> Information </a>
</li>
<li>
<a href="#resources" class="green">Resources</a>
</li>
<li>
<a href="#culture" class="lav">Media</a>
</li>
<li>
<a href="#share" class="teal">Share</a>
</li>
</ul>
<div id="content">
<div id="terms" class="animated"> <p>Understanding Gender identities and Sexual Orientation. Find out more about terms and misconceptions. </p></div>
<div id="resources" class="animated"><p>Access information providing links and other sources for those looking to reach out to others or simply learn more about gender Identitiy and orientation. </p></div>
<div id="culture" class="animated"><p> Examples of books, television, movie and other media that bring light to the topic of gender idenitity and sexual orientation. </p></div>
<div id="share" class="animated"> <p>Share any stories you may have, whether it be about your own experience with your gender or sexuality, or from the perspective of an allie, questions you may have, or other resources that could be useful for other! </p>
</div> <!-- End of Div-->
</div> <!-- End of Div-->
</div><!-- End of Div-->
<!-- Form End -->
<div class="form-share">
<form action="/my-handling-form-page" method="post">
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name" placeholder="Your Name"/>
</div>
<div>
<label for="mail">E-mail:</label>
<input type="email" id="mail" name="user_mail" placeholder="email@gmail.com"/>
</div>
<div>
<label for="msg">Message:</label>
<textarea id="msg" name="user_message" placeholder="Tell us about your story!"></textarea>
</div>
<div class="button">
<button type="submit">Send your message</button>
</div>
</form>
</div> <!-- Form End -->
<hr>
<footer class="info">
<a href="#"> Home</a> |
<a href="index-terms.html"> Terms </a> | <a href="#">Media</a> | <a href="#">Resources </a> | <a href="#">Share</a>
<p class="last-home"> | 2016 | Web Design</p>
</footer>
</div>
</div>
CSS：
@font-face { font-family: "aqua";
src: url('aqua.ttf'); }
@font-face { font-family: "axis";
src: url('Axis Extrabold.otf'); }
@font-face { font-family: "atami";
src: url('Atami-Regular.otf'); }
.container {
width: 100%;
margin: 0 auto;
}
.banner{
display: block;
margin: 0 auto;
width: 100%;
min-width: 400px;
/*margin-bottom: 40px;*/
}
#content {
position: absolute;
z-index: 1;
width: 100%;
}
.gender {
padding-top: 20px;
padding-bottom: 20px;
/* background-color: black; */
margin-bottom: 20px;
}
.gender h3{
text-align: center;
color: rgb(0,0,0); /* white*/
animation: rgb infinite alternate;
animation-duration: 15s;
font-size: 2em;
}
@keyframes rgb {
/* 0% will fallback to the default background-color of #rgb*/
50% {color: rgb(29,185,226); /*blue*/ }
75% {color: rgb(105,45,138); /*purple*/ }
100% {color: rgb(237,49,147); /*pink*/}
}
h3{
font-family: "axis", sans-serif;
}
h1{
font-family: 'Poppins', sans-serif;
font-size: 2.5rem;
}
.content-info {
margin-top: 20px;
text-align: center;
display: block;
}
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; }
#wrap { width: 100%; margin: 0 auto; min-width: 300px; max-width: 2000px;
}
#tabwrap {
/*background: #fff;*/
overflow: hidden;
width: 100%;
max-height: 10rem;
/*min-height: 300px;*/
margin: 0 auto;
background-color: black /*rgb(255,204,254)*/;
/*box-shadow: 0 0 20px #ddd;*/
/*border: 1px solid #ddd;*/
}
#tabs { overflow: hidden; }
#tabs li { list-style: none;
font-family: "axis", sans-serif; }
#tabs li a {
float: left;
display: block;
padding: 10px;
color: white;
width: 25%;
text-decoration: none;
text-align: center;
border-left: 1px solid #888;
font-size: 15px;
font-family: 'Montserrat', sans-serif;
}
#tabs li a:hover { background: #666; }
#tabs li:first-child a { border-left: 0; }
#tabs li:last-child a { border-right: 0; }
#tabs li.current a {
background: #fff;
color: #666;
}
#tabs li.current a.cyan{
background: rgb(245,166,200); /*pink*/
color: white;
}
#tabs li.current a.green{
background-color: rgb(164,206,249); /*blue*/
color: white;
}
#tabs li.current a.lav{
background-color: rgb(200,200,255);
color: white;
}
#tabs li.current a.teal{
background-color: rgb(163,109,174);
color: white;
}
#content > div {
clear: both;
padding: 20px;
line-height: 19px;
color: white;
display: none;
font-family: "aqua", sans-serif;
text-align: center;
}
.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 2s;
}
#content .current { display: block }
#content p { /*margin: 0 0 20px 0;*/
z-index: 1;
}
@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
#terms {
background-color: rgb(245,166,200); /*pink*/
}
#resources {
background-color: rgb(164,206,249); /*blue*/
}
#culture{
background-color: rgb(200,200,255);
}
#share {
background-color: rgb(163,109,174);
z-index: 1;
}
.main-caro img{
display:block;
margin: 0 auto;
padding-bottom: 10px;
}
/* Delete this
------------------------------------------------ */
body {
background: white;
padding: 0;
}
footer.info { text-align: center; color: #888; margin: 30px 0; }
footer.info p { color: black; }
.last-home {
padding-top: 10px;
}
JS：
$('#tabs li a').hover(function(e) {
$('#tabs li, #content .current').removeClass('current').removeClass('fadeInLeft');
$(this).parent().addClass('current');
var currentTab = $(this).attr('href');
$(currentTab).addClass('current fadeInLeft');
e.preventDefault();
}, function(){
$('#tabs li, #content .current').removeClass('current').removeClass('fadeInLeft');
});
最佳答案
要对齐名称和标签，您可能想要尝试在标签中添加显示类型inline-block，并指定一个width。例如：
.form-share label {
display: inline-block;
width: 75px;
text-align: right;
}
https://jsfiddle.net/duxprgua/1/
但是我可能会建议您使用bootstrap之类的方法，它将使您的生活更加轻松：
https://jsfiddle.net/0k7nd6oh/2/
关于javascript - 什么干扰了我的表格？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41069263/