Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Match alignment of list bullets with text in ``

Tags: align divs tree

Match alignment of list bullets with text in `<div>`

Problem

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

  • one
  • 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/

    Problem courtesy of: Pindakaas

    Solution

    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.

    Solution courtesy of: MechaLynx

    Discussion

    View additional discussion.



    This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

    Share the post

    Match alignment of list bullets with text in ``

    ×

    Subscribe to Css3 Recipes - The Solution To All Your Style Problems

    Get updates delivered right to your inbox!

    Thank you for your subscription

    ×