將我的按鈕浮動到右側不起作用

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; 

}