ul与li高度不一致

有以下html代码：

 <ul>
    <li>
        <span>aaaaaaa</span>
        <i class="delete"></i>
    </li>
    <li>
        <span>bbbbbbb</span>
        <i class="delete"></i>
    </li>
</ul>

css代码如下：

 ul
    padding: 15px
    font-size: 0
    width: 857px
    border: 1px solid $color-background
    li
        position: relative
        display: inline-block
        width: 80px
        height 24px
        line-height: 22px
        border: 1px solid #e4e4e4
        border-radius: 2px
        padding: 0 5px
        background-color: #f5f9ff
        font-size: $font-size-medium
        &:nth-child(9n+1)
            margin-left: 0
        .delete
            position: absolute
            display: inline-block
            width: 12px
            height: 12px
            right: -(@width/2)px
            top: -(@height/2)px
            background: url("./close.png") center no-repeat
            background-size: contain
            background-color: $color-background-blue
            border-radius: 50%
            cursor: pointer
        & + li
            margin-left: 15px
        span
            display: inline-block
            width: 100%
            overflow: hidden
            white-space: nowrap
            text-overflow: ellipsis

在chrome中看到ul高度为74，但是li的高度只有24，请问是什么原因呢？

css

阅读 3.7k

2 个回答

1如既往

✓ 已被采纳

把ul的padding属性设置为0，然后再添加一个margin为0，我已经尝试过了，可以的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <style type="text/css">
         ul{
            margin: 0;
            padding: 0;
            font-size: 0;
            width: 857px;
            border: 1px solid $color-background;
         }
        li{
            position: relative;
            display: inline-block;
            width: 80px;
            height: 24px;
            line-height: 22px;
            border: 1px solid #e4e4e4;
            border-radius: 2px;
            padding: 0 5px;
            background-color: #f5f9ff;
            font-size: $font-size-medium;
            &:nth-child(9n+1){
                        margin-left: 0}

        }
        .delete{
            position: absolute;
            display: inline-block;
            width: 12px;
            height: 12px;
            right: -(@width/2)px;
            top: -(@height/2)px;
            background: url("./close.png") center no-repeat;
            background-size: contain;
            background-color: $color-background-blue;
            border-radius: 50%;
            cursor: pointer;
        }
        & + li{
            margin-left: 15px;
        }
        span{
            display: inline-block;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
            
    </style>
</head>
<body>
    <ul>
        <li>
            <span>aaaaaaa</span>
            <i class="delete"></i>
        </li>
        <li>
            <span>bbbbbbb</span>
            <i class="delete"></i>
        </li>
    </ul>
</body>
</html>