Css怎么让浮动的li的距离间隔一样

html-css08

Css怎么让浮动的li的距离间隔一样,第1张

<!DOCTYPE HTML>

<html>

<meta charset="UTF-8" />

<head>

<title></title>

</head>

<style type="text/css">

* {

margin: 0

padding: 0

}

li{list-style: none}

.demo li{float: leftborder: 1px solid #000000width: 50pxtext-align: centerbox-sizing: border-box}

.list li{margin-left: 10px}/*左外边距10px*/

</style>

<body>

<div class="demo">

<ul class="list">

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

</ul>

</div>

</body>

</html>

如果某条边与浮动方向同向,则向该边上的浮动框应用边距时,边距会增加一倍。此错误只影响一次或多次浮动的某行中的第一次浮动。

影响: Internet Explorer 6.0

该错误只影响ie而不影响其他浏览器

加入display:inline

adobe官方解决方法:

Problem

When a margin is applied to a floated box on the same side as the direction the box is floated AND the floated box is the first one inside its containing box, the margin is doubled. (In other words, a left-floated box with margin-left set to move it away from its containing box will be twice as far away from the left edge of the containing box as intended.)

Solution

Specify display: inlinefor the affected float.

Detailed description

This bug only reproduces when the floated element's margin extends in the same direction as the float itself, and is between the float and the container box's inside edge. Subsequent floats with similar margins won't reproduce this bug- just the first float in any row of floated elements.

比如:floatbox{float:leftmargin-left:10px}在FF中是没有问题的。但是在IE里就变20了。改成floatbox{float:leftmargin-left:10pxdisplay:inline}就可以了