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

 我来答
书飞凝683
2016-06-07 · TA获得超过1518个赞
知道大有可为答主
回答量:2250
采纳率:83%
帮助的人:448万
展开全部

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:left; list-style-type:none;去除左侧的点,然后使字体居中对齐center;最后设置li标签的分隔线,这里用边框属性就可以实现此功能;border-right:1px solid #FFF;   border是边框默认的是四周;border-right在li标签右侧添加边框也可以理解为分割线:solid为分隔线的样式;#FFF为分隔线的颜色;

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

推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式