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和浮动的问题

回答

相关问题