오른쪽 버튼이 움직이지 않는다.

Question

나는 이상한 상황에 처한 나의 버튼 input[type="submit"]을 오른쪽으로 띄우려고 노력하고있다.

나는 거기에 공간이 있으므로 오른쪽에 버튼을 떠 다니고 입력 텍스트 옆에 서있다.

하지만 플로트가 작동하지 않고 버튼이 어떤 식 으로든 오른쪽으로 이동하지 않습니다.

는 문제와

내 jsfiddle은 설명 :

http://jsfiddle.net/ritz/5Nq2N/1/

내 HTML :

<footer id="footer-container"> 
    <section id="footer1"> 
     <div id="col">    
     <h1>NEWSLETTER</h1> 
     <p>Register in our Newsletter.</p> 

     <form action="" name="newsletter" method="post" enctype="multipart/form-data"> 
      <label id="email-label2"> 
      <i class="fa fa-envelope-o"></i> 
      <input type="text"id="email2" name="email" placeholder="e-mail" required/> 
      </label>http://jsfiddle.net/#save 
      <br /> 
      <label id="submit"> 
       <input type="hidden" name="news_register" value="register" /> 
       <input type="submit" name="register" value="Register" src="" /> 
      </label>  
     </form> 
    </div> 
    </footer> 

내 CSS는 :

#footer-container 
{ 
    width:100%; 
    float:left; 
    background:brown; 
    height:auto;  
} 

#footer1 
{ 
    width:320px; 
    margin:15px 10px 15px 10px; 
    height:auto;  

} 

#col 
{ 
    float:left; 
    margin-right:53px; 

} 

#col h1 
{ 
    border-bottom:1px dashed #ccc; 
    font-family:'bariol_boldbold'; 
    color:#fff; 
    width:300px; 
    font-size:17px; 
    font-weight:bold; 
    margin-bottom:10px; 
} 


#col p 
{ 
    width:300px; 
    color:#fff; 
    text-align:justify; 
    color:#ccc; 
    font-size:14px; 
    font-family:'bariol_regularregular'; 
    margin-bottom:10px; 
} 



input[type="text"] 
{ 
    font-size: 14px; 
    line-height: 20px; 
    padding: 4px 3px; 

} 

#email2 
{ 
    padding-left: 20px; 
    text-indent:5px; 
    width:172px; 
    height:18px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    font-family:'Tahoma'; 
    font-size:14px; 
    color:#000; 
} 



input[type="submit"] 
{ 
    float:right; 
    margin-right:5px; 
    text-align: left; 
    font-family: 'Tahoma'; 
    font-size: 14px; 
    color: #333; 
    margin-top:10px; 
    outline:none; 
    background: blue; 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    border-radius: 8px; 
    outline:none; 
    cursor: pointer; 
    color:#fff; 
    width: 70px; 
    height: 26px; 
    text-align:center; 
    border:1px solid #3c3412; 
    margin-bottom:15px; 

} 

플로트를 무시

Answer 1

는, 레이아웃은 다음과 같습니다

/----------------Container------------------\ 
| [Text input here]       | 
| [Submit button here]      | 
\-------------------------------------------/ 

지금 float:right에서의 요인을 보자

/----------------Container------------------\ 
| [Text input here]       | 
|      [Submit button here] | 
\-------------------------------------------/ 

참조 여지가, 비록 그것이 마술 위로 이동하지 어떻게.

이제

은의이 레이아웃에 이전 텍스트 입력으로 제출 버튼을 이동 해보자 : 플로트와

/----------------Container------------------\ 
| [Submit button here]      | 
| [Text input here]       | 
\-------------------------------------------/ 

결과 :

/----------------Container------------------\ 
| [Text input here] [Submit button here] | 
\-------------------------------------------/ 

야호! 하지만 ... 제출 버튼이 인 경우 전에는 그다지 의미가 없습니다. 그 밖의 무엇을 할 수 있습니까?

글쎄, <br /> 태그를 제거해보세요.

필요에 따라 여백을 조정!

Answer 2

의미 및 깨진 태그에 몇 가지 문제점이 있습니다. 나는 그것을 고정하고, CSS 업데이트 : http://jsfiddle.net/5Nq2N/3/

팁 :

1. 라벨 요소 내부에 입력 필드를 두지 마십시오을. 레이블은 입력 필드를 설명하고 그 위에 위치해야합니다. <label for="email">Enter your email</label>
2. 항목이 들어있는 컨테이너를 부어 놓으면 컨테이너가 서로 쌓입니다.
3. 지우기 수레) 앤디 버드, 그것의 좋은 기초하여
4. 읽기 CSS 숙달.

<footer id="footer-container"> 
      <section id="footer1"> 
       <div id="col">    
        <h1>NEWSLETTER</h1> 
        <p>Register in our Newsletter.</p> 

        <form action="" name="newsletter" method="post" enctype="multipart/form-data"> 
         <div id="email-label2"> 
          <i class="fa fa-envelope-o"></i> 
          <input type="text"id="email2" name="email" placeholder="e-mail" required /> 
         </div> 

         <div id="submit"> 
          <input type="hidden" name="news_register" value="register" /> 
          <input type="submit" name="register" value="Register" /> 
         </div> 
         <div class="clear"></div>  
        </form> 
       </div> 
      </section> 
</footer> 

.clear { 
    clear: both; 
} 

#footer-container 
{ 
    width:100%; 
    float:left; 
    background:brown; 
    height:auto;  
} 

#footer1 
{ 
    width:320px; 
    margin:15px 10px 15px 10px; 
    height:auto;  

} 

#col 
{ 
    float:left; 
    margin-right:53px; 

} 

#col h1 
{ 
    border-bottom:1px dashed #ccc; 
    font-family:'bariol_boldbold'; 
    color:#fff; 
    width:300px; 
    font-size:17px; 
    font-weight:bold; 
    margin-bottom:10px; 
} 


#col p 
{ 
    width:300px; 
    color:#fff; 
    text-align:justify; 
    color:#ccc; 
    font-size:14px; 
    font-family:'bariol_regularregular'; 
    margin-bottom:10px; 
} 



input[type="text"] 
{ 
    font-size: 14px; 
    line-height: 20px; 
    padding: 4px 3px; 

} 

#email2 
{ 
    padding-left: 20px; 
    text-indent:5px; 
    width:172px; 
    height:18px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    font-family:'Tahoma'; 
    font-size:14px; 
    color:#000; 
    float: left; 
} 

#submit { 
    float: left; 
    margin: 5px 0px 0px 5px; 
} 

input[type="submit"] 
{ 
    text-align: left; 
    font-family: 'Tahoma'; 
    font-size: 14px; 
    color: #333; 
    outline:none; 
    background: blue; 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    border-radius: 8px; 
    outline:none; 
    cursor: pointer; 
    color:#fff; 
    width: 70px; 
    height: 26px; 
    text-align:center; 
    border:1px solid #3c3412; 
    margin-bottom:15px; 

}