html中li标签小圆点不在宽度计算范围内?

li标签在写页面的时候经常使用到,但是往往li标签的list-style都会在reset的时候就去除了。所以一般都不会遇到包含标签样式来布局的。但是对于设计师来说,就是喜欢时不时来点不一样的,正好今天在写页面的布局的时候突然发现 怎么li的小圆点会在ul外边呢?下面是我随便写的一个demo,用作示图。

div class="wrap">
    <ul>
        <li>这是一个小测试</li>
        <li>这是一个小测试</li>
        <li>这是一个小测试</li>
        <li>这是一个小测试</li>
        <li>这是一个小测试</li>
        <li>这是一个小测试</li>
    </ul>
</div>
<style>
    *{margin: 0;padding: 0;}
    .wrap{width: 640px;height: 320px;background: #3990d4;margin: 30px auto;position: relative;}
    .wrap ul{width: 300px;height: 144px;margin:auto;position: absolute;top:0;bottom: 0;left: 0;right: 0;}
    .wrap li{width: 300px;line-height: 24px;font-size: 20px;background: #fe8c18;}
</style>

demo生成后就是这么一个样式,因为后台的问题,放代码有问题,所以只能用图了,将就一下。或者也可以自己动手试试。然而对于这种情况,我们该怎么解决呢。其实很简单。

在li标签里面,有个list-style-position的属性,它有3种样式,分别是 inside(样式在内)、outside(样式在外)、inherit(继承父类属性),默认属性是outside。假如我们需要标签在内,只需要在li标签里修改下list-style-position:inside;就OK了。

陈健的个人博客,记录生活所见所感、学习笔记。专注于Web前端_SEO教程_读书心得。

2 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

返回主页看更多
狠狠的抽打博主 支付宝 扫一扫