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

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伪元素添加按钮。（示例）

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 周围。下面是一个示例。此示例在视觉上与伪元素解决方案相同，只是涉及不同的语义。

---

如果您只想将

background-image与li元素对齐，只需使用填充和background-position速记将其相应地调整为图像即可。（示例）。我不会通过list-style-image添加图像/按钮，因为它的定位有限。

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