내 양식에 어떤 영향을 줍니까?

Question

codepen에서 양식을 만들었습니다. 일단 만족스러워지면 내 배너와 nav에 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도 지정하십시오. 예컨대 :

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

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

하지만 아마 bootstrap 같은 것을 사용하는 것이 좋습니다 것입니다 그리고 그것은 당신의 인생을 훨씬 쉽게 만들 것입니다 : 특별히 https://jsfiddle.net/0k7nd6oh/2/