无序列表横向显示两种方法

注释

1	HTML中条件注释：    <!--[if IE 9]>         .... some HTML here ....    <![endif]-->    条件注释定义只有 Internet Explorer 执行的 HTML 标签。
2	过多的JavaScript注释会降低JavaScript的执行速度与加载速度，因此应在发布网站时，去掉JavaScript注释。 注释块（/* ... */）中不能有(/*或*/，JavaScript正则表达式中可能产生这种代码)，这样会产生语法错误

display

1	display:block; 就是将元素显示为块级元素.	block元素的特点是： 总是在新行上开始； 高度，行高以及顶和底边距都可控制； 宽度缺省是它的容器的100%，除非设定一个宽度 <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。
2	display:inline; 就是将元素显示为行内元素.	inline元素的特点是： 和其他元素都在一行上； 高，行高及顶和底边距不可改变； 宽度就是它的文字或图片的宽度，不可改变。 <span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。
3	display:inline-block;	应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性

无序列表横向显示方法：

1	float:left;	如果无序列表有外边距，即有maring值，则 float：left和display: inline同时用，不然浏览器兼容性会出问题，IE6外边距会加倍
2	display: inline;	虽然可以横向显示，但无序列表的宽度和高度值将不起作用了，即如果li设置值将不起作用，因为display: inline是行内样式。

Html如何设置元素水平居中?

可参考https://jingyan.baidu.com/article/3c343ff7f22c930d377963b5.html

CSS设置如下可实现上图中箭头背景图片效果：

span{

background:url(img/up.png) no-repeat 0 0;

padding-left:18px;

}