BUG

问题：

• 追加零食和添加零食界面层次不清晰
  

解决方法：

• 分割线将两个功能界面隔开
  

思路

此界面之前是通过table进行的窗体布局，但是如果想要在中间添加分割线又能只显示表格中间那条线！

所以我想到的方法是：

• 将添加零食和追加零食用两个表格来布局
  

遇到的问题：

问题一：

刚开始的时候，我在一个div中对两个table进行浮动，导致第二个表格始终在第一个表格的有下方。

原因：

• div是块级元素，一个table就占据整行的位置
  

解决方法：

• 然后同div的块级标签，在标准流的情况下对两个表格以及竖分割线进行左浮动
  

为了使窗体适应所有浏览器和不同宽度的屏幕，所以div的宽度，不设置具体的数值宽度，通过百分比设置

• 
  
  <div style ="width:49%;float:left; height: 200px;">
  
  
• 
  
  
  
  
• 
  
  <hr style="width:2%;height:230px;">
  
  
• 
  
  
  
  
• 
  
  <div style ="width:49%;float:left; margin-left :10px;">   
  
  
  

问题二：

添加完竖直分割线之后，我在下边添加了一个水平分割线，本应该很简单，但还是出现了一点小问题！

我添加在下边的水平分割线，自动浮动到第二个表格的右边。

原因：

• 分割线的默认长度超过了框架的长度
  

解决：

• 根据实际框架，设计分割线长度
  

优化后

后语

看似只是添加了两条线，但是需要你考虑的问题却不少呢！

奈斯，很赞