什么干扰了我的表格？

Question

我在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');
});

Answer 1

要对齐名称和标签，您可能需要尝试在标签中添加显示类型inline-block，并指定width。 E.g：

.form-share label {
    display: inline-block;
    width: 75px;
    text-align: right;
}

https://jsfiddle.net/duxprgua/1/

但我可能会建议使用像bootstrap这样的东西，它会让你的生活更轻松： https://jsfiddle.net/0k7nd6oh/2/