Match alignment of list bullets with text in `
`

Question

I am injecting html from an editor into my site. How can I 'inherit' the alignment from a child element like this:

<li>
  <div align="right">one</div>
</li>

the issue is that the bullets are aligned left and text is right , I would like to get the alignment from whatever is set on the div in this case 'right'. This can be different since it is coming from an html-editor.

css:

 ul, ol, li {
list-style: disc !important;
}

jsfiddle:http://jsfiddle.net/bfu20zhq/

So you want the parent bullet to have the same alignment as the child `div`? Will there be more than one child `div`? — ivan.sim, Sep 29 '14 at 02:33

score 0 · Answer 1 · answered Sep 29 '14 at 03:45

0

If you want the same alignment simply add "list-style-position: inside;" to your css like this fiddle.

li 
{
list-style: disc;
list-style-position: inside;
}

answered Sep 29 '14 at 03:45

philip

216
1
10

score 0 · Accepted Answer · edited May 23 '17 at 11:49

There is no way to select a parent according to this and the MDN has nothing to suggest that this has changed recently.

However, as indicated in related posts, this can be achieved through javascript (and must be, since css can't do it yet). You can do this by walking the DOM tree and finding all the div elements that have a parent li and then make their align attributes the same:

// create the filter for the tree walker

var div_filter = {
    acceptNode: function (node) {
        if ( node.tagName == 'DIV' && node.parentElement.tagName == 'LI' ) {

             return NodeFilter.FILTER_ACCEPT;

        }
    }
};

// create the tree walker so we can
// find all the divs

var treeWalker = document.createTreeWalker( document.body, 
                                            NodeFilter.SHOW_ELEMENT, 
                                            div_filter, 
                                            false);


// walk the DOM tree for the nodes we want
// and make the `li` elements have the same `align` as the `div`s
while (treeWalker.nextNode()) {
    console.log(treeWalker.currentNode);
    treeWalker.currentNode.parentElement.setAttribute('align', 
                                    /* fetch the div's align attribute */
                                    treeWalker.currentNode.getAttribute('align') );
}

Unfortunately, while this correctly sets the align attribute, it doesn't give the desired result as you can see in this fiddle. I'm leaving this here however because we need it for the full solution.

Setting float: right on the list elements has an effect, but a horrible one.

After a bit of tweaking, I found that adding inside to list-style and adjusting text-align to right or left accordingly, the desired result is achieved:

This is what we want, if the div has align = "right"

li {
    list-style: disc inside;
    text-align: right;
}

We also need to change the divs to display: inline-block so they don't act like non-text elements:

li > div {
    display: inline-block;
}

If you want to align the bullets vertically, you need to give the divs a definite width, such as width: 30% or something like that.

So our while loop changes to:

while (treeWalker.nextNode()) {
    console.log(treeWalker.currentNode);
    treeWalker.currentNode.parentElement.style.textAlign = 
                 treeWalker.currentNode.getAttribute('align');
}

Here is the complete fiddle.

Match alignment of list bullets with text in ``

2 Answers2

Match alignment of list bullets with text in `
`