1、打开编辑测试的软件,设置一个div区域,li标签因为默认的需要换行,所以需要设置一个浮动点,float:left;使其靠左浮动对齐;主要代码如下:
- li标签右边框
- li标签右边框
- li标签右边框
- li标签右边框
详解:设置一个宽度:100%,高度为30px的区域,再次设置一下背景颜色与字体颜色,使其区分开;
设置一个ul宽度,让其在div区域中居中对齐;
最后也是最关键的li标签设置:宽度180px高度同样30px;靠左浮动float:left; list-style-type:none;去除左侧的点,然后使字体居中对齐center;最后设置li标签的分隔线,这里用边框属性就可以实现此功能;border-right:1px solid #FFF; border是边框默认的是四周;border-right在li标签右侧添加边框也可以理解为分割线:solid为分隔线的样式;#FFF为分隔线的颜色;