Dynamically add divider between horizontal text

Hi All,

I have an issue I can’t seem to figure out (what else is new right??). So I have some text fields that are evenly horizontally placed side by side. I have that going good. What’s killing me is, I need to put a divider in between the text as well. I can’t seem to figure out how to do that. I’m trying to accomplish something like what you see below:


Home   |   About   |   Some Other Link   |   One Other Link  

Can someone have a look at my code and please please tell me what I’m doing wrong


function initFooterNav () {
    
    
    for (var a:Number = 0; a < 4; a++) {
        
        var footer_div:FooterDivider = new FooterDivider();
        var _footer_text:FooterText = new FooterText();
        
        footer_holder.addChild(_footer_text)
        
        //this if statement aligns the text evenly
        if (a > 0) {
            var previous_entry = footer_holder.getChildAt(a - 1)
            _footer_text.x = previous_entry.width + previous_entry.x + 40;
        }
        
        //This is the code adds the dividers.  
        //The dividers show, but they are unevenly spaced
        if (a < 3 ) {
            addChild(footer_div)
            footer_div.x = _footer_text.width + 234 * a
            footer_div.y = 3
        }
        
        _footer_text.name = "footer_" + [a]
        _footer_text.tf.autoSize = TextFieldAutoSize.LEFT
        _footer_text.tf.text = footerArr[a]
        _footer_text.mouseChildren = false;
        _footer_text.buttonMode = true;
        _footer_text.addEventListener(MouseEvent.CLICK, footerClick)
        
    }
    
}

initFooterNav();

Please let help!!