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;"> 问题二：
添加完竖直分割线之后，我在下边添加了一个水平分割线，本应该很简单，但还是出现了一点小问题！
我添加在下边的水平分割线，自动浮动到第二个表格的右边。
原因：
- 分割线的默认长度超过了框架的长度
解决：
- 根据实际框架，设计分割线长度
优化后
后语
看似只是添加了两条线，但是需要你考虑的问题却不少呢！