html中如何在li中嵌槽这些数字

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

<style>

.ceshi{

    width:100%

    height:30px

    background-color:#F00

    color:#FFF

    }

.ceshi ul{ width:820px margin:0 auto}

.ceshi ul li{width:180px height:30px float:left list-style-type:none text-align:center line-height:30px border-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为分隔线的颜色；

2、网页中实现的效果为：

使用jQuery。

1、先通过标签找出所有的li；

2、用each方法循环出每个li对象；

3、使用获取到的li对象，设置其id属性为当前ID加一个随机数；

$("li").each(function(index,element){

    var li = $(element)

    li.attr('id', li.attr('id') + "_" + index)

  })

---