CODEWITHSUNDEEP
htmlcsslistwebalignment
omar
omar

Reputation: 110

How to align button to stay beside text in a list

So I need to make a list and I need to know how do I add a custom button for li and align it to stay beside the text when my text is aligned to the centre.

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>

Upvotes: 1

Views: 1711

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 241078

I would suggest adding the buttons via :before or :after pseudo elements. (example)

The structure of the HTML is simple. The data-hover attribute value will be the text of the button.

<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>

A content value of attr(data-hover) will effectively add the li element's data attribute.

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

Alternatively, another approach would just be to directly nest elements within the li. You could wrap an anchor element around a button element or a span. Here is an example. This example is visually identical to the pseudo element solution, it just involves different semantics.

If all you are looking to do is align a background-image to the li elements, just use padding and the background-position shorthand to adjust it to the image accordingly. (example). I wouldn't add the image/button via list-style-image, as it has limited positioning. 

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

Upvotes: 1

Related Questions