浮动元素不换行。做豆瓣的时候，就模仿了豆瓣当前播放榜的一种风格。效果和代码如下。项目列表{overflow-x:auto;空白：nowrap；字体大小：0；填充：15px030px0；/*no*//*移除滚动条*/&::-webkit-scrollbar{display:none;}.item{显示：内联块；宽度：100px；/*无*/margin-left:40px;垂直对齐：顶部；&:nth-of-type(1){margin-left:0;}}最重要的是设置white-space:nowrap;在父元素中确保子元素强制设置子元素和父元素的大小而不换行。在我们写这个之前，我们可以设置width:100%;height:100%;对于子元素。其实也可以用下面的写法。父{位置：相对;宽度：200px;高度：200px；.child{位置：绝对；顶部：0；底部：0；左：0；右：0；背景色：红色；absolute的属性将子元素“扩展”到父元素的大小*//*如果我们设置left:20px;右：20px；那么就相当于设置父元素padding:020px;子元素设置width:100%;*/元素等尺寸左右浮动。如果我们想达到这样的效果，我们可能会使用浮动。现在我们可以考虑使用下面的写法ul{width:100%;padding:018px;/*no*/box-sizing:边框框；margin-top:30px;/*no*/>li{width:50%;padding:3px;/*no*/float:left;框大小：边框框；文本对齐：居中；font-size:15px;/*no*/background-color:#ffffff;a{显示：块；填充：12px0；/*无*/宽度：100%；高度：100%；背景颜色：#f6f6f6；颜色：#333；}}}向上/向左拉伸元素CSS默认情况下，框的长度从上到下变化，宽度从左到右变化。有时候需要实现盒子从底部弹出，或者盒子从右向左弹出的效果，可以使用如下代码，同理从右向左弹出。测试{位置：绝对；底部：0；宽度：100px；高度：10px；背景颜色：红色；}测试效果$(".test").animate({"height":"100px"},2000)
