h3가 페이드 인 또는 페이드 아웃 한 후 이동합니다.

Question

저는이 웹 사이트 재 설계를 마쳤으며 재미있는 새로운 기능을 추가하려고했습니다. 바닥 글에 중첩되어있는 연락처 양식을 가지고 있지만 마음에 들지는 않습니다. : p 나는 스크립트가 잘 작동하고 있으며 fadeToggle은 그 트릭을 훌륭하게 수행하지만, 클릭 요소 역할을하는 메인 헤더는 활성화 될 때 좌우로 트여있는 것처럼 보입니다. 나는 단지 li을 숨기고 ul 또는 h3을 숨기고 있지는 않습니다. 그래서 왜 움직이는 지 확신하지 못합니다. 어떤 아이디어라도 대단히 감사하겠습니다! 이것은 나에게 삶이나 죽음이 아니지만 나에게서 지옥을 괴롭게한다.

Live site

jsFiddle before fix

jsFiddle fixed

HTML

<div class="formS"> 
    <span class="footerT">© Copyright 2013 Ohio Association of Health Underwriters</span> 
    <form action="" method="post"> 
     <ul> 
     <h4>Contact Us (click here)</h4> 
     <input type="hidden" name="subject" value="Submission" /> 
     <input type="hidden" name="redirect" value="thankyou.html" /> 
     <li><label for="name">Name</label> 
     <input type="text" name="name" id="name"></li> 

     <li><label for="zip">Zip</label> 
     <input type="text" name="zip" id="zip"></li> 

     <li><label for="city">City</label> 
     <input type="text" name="city" id="city"></li> 

     <li><label for="telephone">Telephone</label> 
     <input type="text" name="telephone" id="telephone"></li> 

     <li><label for="email">Email</label> 
     <input type="text" name="email" id="email"></li> 

     <li><label for="comments">I would like to know:</label> 
     <textarea name="comments" id="comments" cols="40" rows="5"></textarea></li> 

     <li><button name="submit" type="submit" class="submit" id="submit" value="Submit">Submit</button></li> 

     <input type="hidden" name="form_order" value="alpha"/> 
     <input type="hidden" name="form_delivery" value="hourly_digest"/> 
     <input type="hidden" name="form_format" value="text"/> 
     </ul> 
    </form> 
</div> 

CSS

/* Contact form page */ 

.formS { 
width: 960px; 
margin: 0 auto; 
padding: 0; 
} 

form > ul   { 
font-size: 18px; 
padding: 0; 
margin: 0; 
float: right; 
    list-style-type:none; 
} 

form > ul > li { 
padding: 5px; 
display: none; 
} 

form { 
text-align:left; 
padding: 0 10px 10px 10px; 
height: 408px; 
} 

.formS > form > ul > li > label  { 
float: left; 
width: 50px; 
margin:5px 10px 0 0; 
text-align:right; 
display:block; 
background:none; 
font-weight:bold; 
font-family: Arial, Helvetica, sans-serif; 
font-size: 12px; 
} 

input:focus, textarea:focus { 
background: rgba(0, 0, 0, 0.1); 
border-radius: 5px; 
color: #fff; 
text-shadow: 0 1px 0 #2b2b2b; 
} 

textarea { 
width: 150px; 
height: 50px; 
border: 3px solid rgba(255, 255, 255, 0.5); 
padding:5px; 
background: rgba(0, 0, 0, 0.1); 
border-radius: 5px; 
box-shadow: 0 1px 3px #2b2b2b inset; 
resize: vertical; 
} 

.formS > form > ul > li > input { 
width: 150px; 
height: 15px; 
border: 3px solid rgba(255, 255, 255, 0.5); 
padding:5px; 
background: rgba(0, 0, 0, 0.1); 
border-radius: 5px; 
box-shadow: 0 1px 3px #2b2b2b inset; 
} 

jQuery를

$('form ul h4').on('click', function() { 
    $('form > ul > li').stop(true).fadeToggle(1500); 
}); 

(P.S. 입력 태그가 ul 안에 들어갈 수없고 현재이 연락처 양식에서 이전 개발자의 실수를 수정하고 있음을 알고 있습니다.>>. 적어도이 사이트의 디자인/개발의 나머지 부분에 대해서는 나 자신을 처리해야했습니다.)

Answer 1

<ul>의 너비는 내부의 보이는 항목에 의해 결정됩니다. <ul>의 너비는 연락처 양식의 완전히 보이는 버전만큼 넓게 지정해야합니다. 예를 들면 :

form > ul { 
    width: 240px; 
} 

Answer 2

헤더가 왼쪽 정렬되어 양식이 표시되면 부모 요소가 확대되어 왼쪽으로 확장됩니다. 헤더를 오른쪽 정렬하면 컨테이너가 얼마나 넓어 지더라도 오른쪽 정렬됩니다.