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

이 clear your float에 .side_block에 overflow:hidden; zoom:1;를 추가합니다.

출처

2010-07-30 17:06:17

+1. 이전에 '부유함'이라는 용어를 들었지만, 이것이 무엇인지, 왜해야 하는지를 정확히 이해하는 데 도움이되었습니다. – GSto

이 시도 ... 링크에 대한

<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 및 수레 문제

답변

관련 문제