css怎么控制li和ul的边距

html-css021

css怎么控制li和ul的边距,第1张

css控制li和ul的边距,可以使用margin属性来实现或者padding属性都可以，在设置width和height属性时，计算好各自的距离，然后设置多少px就可以实现，下面介绍了一下简单的控制和去掉li前面圆点的方法

一、CSS控制ul缩进间距的方法：

<style type="text/css">

ul{margin-left:-10px}

</style>

<ul>

<li>XXX</li>

</ul>

二、CSS去掉li点的三种方法：

方法一：

<ul>

<li style="list-style-type:none">XXX</li>

<li style="list-style-type:none">XXX</li>

<li style="list-style-type:none">XXX</li>

<li style="list-style-type:none">XXX</li>

</ul>

方法二：

<style type="text/css">

li{list-style-type:none}

</style>

<ul>

<li>XXX</li>

<li>XXX</li>

<li>XXX</li>

<li>XXX</li>

</ul>

方法三：

<style type="text/css">

.li_style{list-style-type:none}

</style>

<ul>

<li class="li_style">XXX</li>

<li class="li_style">XXX</li>

<li class="li_style">XXX</li>

<li class="li_style">XXX</li>

</ul>

css控制li和ul的边距,可以使用margin属性来实现或者padding属性都可以，在设置width和height属性时，计算好各自的距离。

然后设置多少px就可以实现，下面介绍了一下简单的控制和去掉li前面圆点的方法。

即把li变为行内元素且可以设置宽高以及边距，这样也有一个问题，低版本的Ie浏览器不兼容inline-block，建议在其后再加两个属性兼容低版本ie。

浏览器的默认值.

其实很多元素浏览器都设有相应的默认值的,就如

ul有40px 的margin

body有10px 的margin

a标签有下划线

p标签字体默认是黑色

等……

（当然，各不同的浏览器，其默认值设置也有所不同）

大多数人在写CSS前，一般都会加上一条通配符设置取消浏览默认值的：

*{margin:0padding:0}

其实浏览器的一些默认值，自己实践多了，自然就会知道的了。