Question

在我的html中，我有一个带有班级的列表。

<ul style="list-style-type:none">
<li class="tick">Active directory management</li>
</ul>
li.tick:before {
    content: "\2713";
    color: #1ABC9B;
    padding-right: 8px;
}

以下是jsfiddle

但是在调整大小时它有响应问题。

如何将“管理”与“活动”完全对齐？

Answer 1

li.tick {
    padding-left: 30px;
    position: relative;
}

li.tick:before {
    content: "\2713";
    color: #1ABC9B;
    left: 0;
    position: absolute;
    top: 0;
}

Answer 2

＆＃13;

abc%

＆＃13;

li {
  position: relative;
  padding-left: 20px;
}

li.tick:before {
    position: absolute;
    line-height: 20px;
    content: "\2713";
    color: #1ABC9B;
    left: 0;
    top: 0;
}

＆＃13;

Answer 3

此代码有效

<style>
        ul {
            display: flex;
        }
        .tick-before::after {
            content: "\2713";
            color: #1ABC9B;
            padding-right: 8px;
        }

    </style>

</head>

<body>
    <ul style="list-style-type:none">
       <div class="tick-before"></div>
        <li class="tick">Active directory management</li>

    </ul>
</body>

在响应视图中对齐列表项

3 个答案: