web开发编写与预期不符合

img

img

img

img


为什么产生的效果和最下面的不一样（设置了边距但是怎么弄都是死效果）


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        ul li:nth-child(2n){
            width: 1px;
            background-color: blue;
            margin: 9px 15px 0 15px;
            height: 12px;

        }
        li{
            float: left;
            list-style: none;
        }
    </style>
</head>
<body>
<ul>
    <li>asd</li>
    <li></li>
    <li>pasd</li>
</ul>
</body>
</html>

img

说明样式加上 ，你审查元素看看 li .

直接 .fr 或者 .shortuct .fr

有没有其它的样式干扰了，通过浏览器的F12调试，可以看一下