Problème avec CSS et Floats

J'ai une boîte où j'essaie d'ajouter un bouton dans le coin en bas à droite, mais quand j'essaie de le faire flotter à droite, il finit en dehors du div où je l'ai placé. puis-je résoudre ce problème?Problème avec CSS et Floats

Link To Live Example

code:

<!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>

Source

2010-07-30 GSto

Effacer votre flotteur:

<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>

Source

2010-07-30 17:06:23

Ajouter à overflow:hidden; zoom:1;.side_block à clear your float.

Source

2010-07-30 17:06:17

+1 pour le lien. J'ai déjà entendu le terme «défrichement des flotteurs», mais cela m'a aidé à comprendre exactement ce que c'est et pourquoi cela doit être fait. – GSto

Essayez cette ...

<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>

Source

2010-07-30 17:08:57

Problème avec CSS et Floats

Répondre

Questions connexes