Question

所以我需要制作一个列表，我需要知道如何为li添加自定义按钮，并在文本与中心对齐时将其对齐以保留在文本旁边。

CSS

ul {
    list-style: none;
    list-style-image: url("button.png");
    text-align: center;
    display: inline-block;
    margin-left: 20px;
}

HTML

<ul>
    <li>I am Caring and Helpful</li>
</ul>

Answer 1

我建议通过:before或:after伪元素添加按钮。 (example)

HTML的结构很简单。 data-hover属性值将是按钮的文本。

<ul>
    <li data-hover="button 1">Item</li>
    <li data-hover="button 2">Item</li>
    <li data-hover="button 3">Item</li>
    <li data-hover="other button">Item</li>
</ul>

内容值attr(data-hover)将有效地添加li元素的数据属性。

li:before {
    content:attr(data-hover);
}

或者，另一种方法是直接将元素嵌套在li中。您可以围绕button元素或span包裹锚元素。这是一个example。此示例在视觉上与伪元素解决方案相同，它只涉及不同的语义。

如果你要做的只是将background-image与li元素对齐，只需使用填充和background-position速记将其相应地调整为图像。 (example)。我不会通过list-style-image添加图片/按钮，因为它的定位有限。

li {
    list-style: none;
    padding: 15px 0 15px 60px;
    background: url("http://placehold.it/50x50") 0 0 / 50px 50px no-repeat;
}

如何将按钮对齐以保留在列表中的文本旁边

1 个答案: