htmlli,div的几种排列方法

li第一种排列方法<浮动挤排列>顾名思义就是把一部分文字图片或一个模块给挤下去

• 
三星手机GT-I8552(釉白&＃xff09; 4.7英寸屏幕&＃43;四核1.2GHz CPU&＃43;1G RAM&＃43;双卡双待。
• 
小米手机红米(灰色)移动版 红米手机。
• 
苹果 手机 iPhone5S &＃xff08;16GB&＃xff09;&＃xff08;金&＃xff09;。
• 
三星 手机 I9500 (皓月白) 2GB强大运行内存&＃xff0c;5.0英寸全高清屏&＃xff0c;1300万像素摄像头。

 先设置浮动让他浮动到一起&＃xff08;一行装的下的话就在一行&＃xff0c;装不下就在多行&＃xff09;建议右浮动因为运行时是从前往后的如果左浮动位置会颠倒

li{float: left;}

设置大小可以设置大框架的长度和小框架的长度或用所占百分比 我这里是用百分比

li{float: left;width: 50%;}

第二种display方法 他的一个属性叫display: -webkit-box;改变原有属性&＃xff0c;让他连在一起但他只会占一行如果东西太多会自动拓宽 display还有其他属性大家可以自行百度

在初始代码加这一行就会使这个ul里面的li都排在一行

ul{display: -webkit-box;}

 因为我设置的是ul这一块的所以只排列这一块同理我只需要把他分成两个ul就欧克了

原代码

 新的

• 
三星手机GT-I8552(釉白&＃xff09; 4.7英寸屏幕&＃43;四核1.2GHz CPU&＃43;1G RAM&＃43;双卡双待。
• 
小米手机红米(灰色)移动版 红米手机。

• 
苹果 手机 iPhone5S &＃xff08;16GB&＃xff09;&＃xff08;金&＃xff09;。
• 
三星 手机 I9500 (皓月白) 2GB强大运行内存&＃xff0c;5.0英寸全高清屏&＃xff0c;1300万像素摄像头。

运行结果

 我们在修饰ul&＃xff0c;li的宽度和其他想要的效果就可以了

ul{width: 400px;display: -webkit-box;margin: 10px auto;}li{width: 50%;width: 200px;}

 本人也是小白一个刚学没多久也没学太深其他的方法欢迎补充一起进步如有疏漏请指正 当然我也会慢慢学慢慢补充我们山顶见