本文共 1820 字，大约阅读时间需要 6 分钟。

        背景：

        想加个进度条，类似于这样：，但是文字总是处于近吐掉上方：。

        方法试探：     

   
     Process1:
   
   
     
    
        
     
    
    
   

         得到想要的样子： ，但是重复添加，如：

   
     Process1:
   
   
     
    
        
     
    
    
   
   
     Process1:
   
   
     
    
        
     
    
    
   

         得到效果： ，没有换行。

        加空DIV后，换行：

   
     Process1:
   
   
     
    
        
     
    
    
   
   
    end
   
   
     Process1:
   
   
     
    
        
     
    
    
   
   
    end
   

        效果： 。

        一个朋友给代码，不用加空DIV就可换行：

   
    Prooess2:
   
   
    
    
        
     
    
    
   
   
    end
   
   
    Prooess3:
   
   
    
    
        
     
    
    
   
   
    end
   

        效果： 。

        问题

        对比，发现原代码去掉如下代码后，换行，否则不换行，不解，先存放。

border: 1px solid #C0C0C0;

去掉前：

去掉后：

        原代码使用<div style="float:left;">end</div>依旧会不换行，不知道为啥。代码：

   
     Process1:
   
   
     
    
        
     
    
    
   
   
    end
   
   
     Process1:
   
   
     
    
        
     
    
    
   
   
    end
   
   
     Process1:
   
   
     
    
        
     
    
    
   
   
    end
   

        效果图： 。

        也可用table。全代码：

 
   
     Process1:
   
   
     
    
        
     
    
    
   
   
    end
   
   
     Process1:
   
   
     
    
        
     
    
    
   
   
    end
   
   
     Process1:
   
   
     
    
        
     
    
    
   
   
    end
   
   
     Process1:
   
   
     
    
                
     
    
    
   
   
    end
   
   
    Prooess2:
   
   
    
    
        
     
    
    
   
   
    end
   
   
    Prooess3:
   
   
    
    
        
     
    
    
   
   
    end
   
   
    Prooess1:
   
   
    
    
        
     
    
    
   
   
    end
   
   
    Prooess1:
   
   
    
    
        
     
    
    
   
   
    end
   
   
        
     
              
Prooess1:
              
            
       
                
        
            
       
        
              
End
         
    
   
   
        
     
              
Prooess1:
              
            
       
                
        
            
       
        
              
End
         
    
   
 

        效果：