CSS和浮動的問題

我有一個框，我試圖向右下角添加一個按鈕，但是當我嘗試將它浮動到正確位置時，它最終在我放入的div的外部。我能解決這個問題嗎？CSS和浮動的問題

代碼：

<!doctype html> 
<html> 
    <head> 
     <style> 
     #sidebar { 
      width: 340px; 
      float:left; 
     } 

     .side_block { 
      background-color: #FFFFFF; 
      padding:8px; 
      margin: 8px; 
      border-radius: 12px; 
      border: 1px solid #AAAAAA; 
     } 
     .addLink{ 
      float:right; 
      font-size:12px; 
     } 
     </style> 
    </head> 
    <body> 
     <div id="sidebar"> 
      <div class="side_block"> 

         <h4>Files</h4> 
         <ul> 
          <li><a href="#">Original Emails.doc</a></li> 
          <li><a href="#">Homepage Draft.jpg</a></li> 
          <li><a href="#">First_Draft.txt</a></li> 
         </ul> 
         <input type="button" class="addLink" value="+Add File" style="float:right;"> 
      </div> 
     </div> 
    </body> 
</html>

來源

2010-07-30 GSto

清除您的浮動：

<div class="side_block"> 

      <h4>Files</h4> 
      <ul> 
       <li><a href="#">Original Emails.doc</a></li> 
       <li><a href="#">Homepage Draft.jpg</a></li> 
       <li><a href="#">First_Draft.txt</a></li> 
      </ul> 
      <input type="button" class="addLink" value="+Add File" style="float:right;"> 
      <br style="clear: right;" /> 
</div>

來源

2010-07-30 17:06:23

到.side_block加入overflow:hidden; zoom:1;到clear your float。

來源

2010-07-30 17:06:17

+1的鏈接。我之前聽說過「清理浮動」一詞，但這有助於理解到底是什麼以及爲什麼需要完成。 – GSto 2010-07-30 17:09:17

嘗試......

<body> 
    <div id="sidebar"> 
    <div class="side_block"> 
     <input type="button" class="addLink" value="+Add File" style="float:right;"> 
     <h4>Files</h4> 
     <ul> 
     <li><a href="#">Original Emails.doc</a></li> 
     <li><a href="#">Homepage Draft.jpg</a></li> 
     <li><a href="#">First_Draft.txt</a></li> 
     </ul> 
    </div> 
    </div> 
</body>

來源

2010-07-30 17:08:57

CSS和浮動的問題

回答

相關問題