时间戳

首页 > 解决方案 > 如何将徽章与 CSS 中的列表项对齐

html - 如何将徽章与 CSS 中的列表项对齐

问题描述

如何将徽章（图像）放置在列表的左侧边缘？

这是 HTML 中的一个示例

<ul>
    <li>
        <img class="icon" src="https://via.placeholder.com/40x30.png/f60"/>
        <img class="icon" src="https://via.placeholder.com/40x30.png/ff0"/>
        Some text
    </li> 
    
    <li>
        <img class="icon" src="https://via.placeholder.com/40x30.png/ff0"/>
        Some other text
    </li> 
</ul>

和 CSS

body {
        margin-left: 200px;
}

.icon {
    display: inline-block;
    position:relative;
    left: -80px;
}

现场演示中的相同示例https://www.codeply.com/p/R2rUeDHoVC

这就是我想要的

这是我目前所拥有的（图像在文本中创建了不需要的间隙并隐藏了列表项目符号）。

如果每个项目有多个标记，则图像应该向左增长（所有图像都应该右对齐）。

我尝试了各种显示、位置、弹性等设置，但不知何故无法找出正确的组合。

标签： htmlcss

解决方案

我的解决方案取决于有限数量的图标（图像），但可以改进。

编辑：我编辑了答案以保留项目符号。

body {
        margin-left: 200px;
}

li {
    position: relative;
    height: 35px;
}

li .icon {
    position: absolute;
    display: inline-block;
    left: -65px;
}

li .icon:nth-child(2) {
    position: absolute;
    display: inline-block;
    left: -110px;
}

li .icon:nth-child(3) {
    position: absolute;
    display: inline-block;
    left: -160px;
}

li .icon:nth-child(4) {
    position: absolute;
    display: inline-block;
    left: -210px;
}
<ul>
    <li>
        <img class="icon" src="https://via.placeholder.com/40x30.png/f60"/>
        <img class="icon" src="https://via.placeholder.com/40x30.png/ff0"/>
        Some text
    </li> 
    
    <li>
        <img class="icon" src="https://via.placeholder.com/40x30.png/ff0"/>
        Some other text
    </li> 
    
    <li>
        <img class="icon" src="https://via.placeholder.com/40x30.png/f60"/>
        And even more text
    </li>
</ul>

推荐阅读