html里的ul和Li的区别是什么

1、定义不同

ul 是 Unordered List（无序列表）的缩写。<li>标签定义列表项目（li是lists的缩写）。

2、用法不同

<ul>标签定义无序列表。使用 <li>标签定义的列表可以是个无序列表也可以是有序列表。

3、支持的HTML全局属性不同

<li>标签支持所有的HTML 全局属性。<ul>标签支持 HTML 中的全局属性：accesskey、class、dir、id、lang、style、tabindex、title。

4、属性不同

<ul>标签中的属性：compact、type。<ul>标签：id, class, title, style, dir, lang, xml:lang。

5、元素级别不同

ul 是块级元素可以定义宽和高，li表示行排列不能单独使用，需要在ul和ol里面，配合使用。

1、打开编辑测试的软件，设置一个div区域，li标签因为默认的需要换行，所以需要设置一个浮动点，float:left使其靠左浮动对齐；主要代码如下：

<style>

.ceshi{

width:100%

height:30px

background-color:#F00

color:#FFF

}

.ceshi ul{ width:820pxmargin:0 auto}

.ceshi ul li{width:180pxheight:30pxfloat:leftlist-style-type:nonetext-align:centerline-height:30pxborder-right:1px solid #FFF}

</style>

<div class="ceshi">

<ul>

<li>li标签右边框</li>

<li>li标签右边框</li>

<li>li标签右边框</li>

<li>li标签右边框</li>

</ul>

</div>

详解：设置一个宽度：100%，高度为30px的区域，再次设置一下背景颜色与字体颜色，使其区分开；

设置一个ul宽度，让其在div区域中居中对齐；

最后也是最关键的li标签设置：宽度180px高度同样30px；靠左浮动float:leftlist-style-type:none去除左侧的点，然后使字体居中对齐center最后设置li标签的分隔线，这里用边框属性就可以实现此功能；border-right:1px solid #FFF border是边框默认的是四周；border-right在li标签右侧添加边框也可以理解为分割线：solid为分隔线的样式；#FFF为分隔线的颜色；

li标签在html中大多作为导航或信息列表的结构。其实li配合list-style-type和list-style-position可以方便的设置小圆点或三角箭头。注意list-style-position: inside需要设置为inside设置在盒模型内才能生效。

除去list-style-type设置图标，可以用常规的relative配合absolute来设置箭头或者圆点等。

---