CSS再究内容变两列

上一篇说到，如果直接引用第六个模块代码，web还能正常显示，答案是不能：

第三行的第一列的内容太长。要做好一个网页，其实还是有一些约定俗成的东西，如果这样写的话，可能会更好看一些：

1、页面初始化

a、padding-inline-start

ul{

padding-inline-start:px;

}

去掉浏览器默认的内边距和填充（有的浏览器有，有的浏览器没有）

b、list-style-type

li{

list-style-type:none;

}

去掉内容的默认标记实心圆

c、去掉超链接的下划线（一般页面的超链接是不需要下划线的，个别需要的地方，再额外写）

a{

text-decoration:none;

}

如图：

2、内容裁剪

#list_row1li

{

......

}

a、宽度限制

内容的宽度不限制，就不会有后面的内容换行、隐藏内容和隐藏内容为省略号

width:px;

b、内容超过限制不能换行

要是可以换行，也就不存在内容的隐藏和隐藏的内容为省略号

white-space:nowrap;

c、内容超过限制的部分隐藏

overflow:hidden;

d、内容超过限制的部分为省略号

text-overflow:ellipsis;

3、内容形成两列

a、浮动和间距20px

float:left;

clear:both;

margin:10px;

总结：

要html的几行内容形成两列，需要有个思路：

1、初始化；

2、内容截断，其中涉及宽带的设置、内容不换行、截断内容隐藏和显示省略号；

3、左边的内容要浮动其他内容不浮动，考虑间距需要考虑左右各一部分。

以上。