Breadcrumb generation

Question

I have a list of link buttons that become visible as things
in a tilelist are clicked on (ie a dynamic breadcrumb) and the
label property of each are changed based on what in the tilelist
has been clicked on. I am having serious problems trying to
position these things based on the size of the label. If I create
an HBox then there is too much space in-between the link buttons
and I can't figure out how to get rid of it. If I go without an
HBox and just set the x position based on the previous link button
label length that doesn't work either because [label
id].label.length returns just the length of characters in the label
and not it's length in pixels. I also tried [label id].width but
this value appears to be the largest width the link button has been
set to thus far. So if the link button gets assigned a label of 20
characters and then later on in the program it gets assigned one
with only 5 then the width property still remains 20. Anyone got
any idea how to either convert length in characters to length in
pixels OR reduce the spacing between items in an HBox. I have tried
setting the paddingleft to 0, the width of child items to 0% the
width of child items to 0, you name it I feel like I’ve tried
it. But it's almost like the HBox has a built in minimum padding
that I can't seem to figure out how to change.

Answer 1

Bingo, I got it. Thanks Flightguy for your padding idea
because that did come into play I believe. I included the complete
code for a simple version below. I knew it was a somewhat simple
solution.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Script>
<![CDATA[
public function clickgroup(event:MouseEvent):void{
lb1.visible=true;
lb1.label="Home";
lbl1.visible=true;
lbl1.text="> Grp Name";
public function clickalbum(event:MouseEvent):void{
lbl1.text=">";
lb2.visible=true;
lb2.label="grp name";
lbl2.visible=true;
lbl2.text="> album name"
lbl1.width=12
public function clickback(event:MouseEvent):void{
lb1.visible=true;
lb1.label="Home";
lbl1.visible=true;
lbl1.width=200;
lbl1.text="> Grp Name";
lb2.visible=false;
lbl2.visible=false;
]]>
</mx:Script>
<mx:Canvas width="455" height="370" x="10" y="10"
backgroundColor="#c0c0c0">
<mx:HBox horizontalGap="0">
<mx:LinkButton id="lb1" label="Home" paddingLeft="0"
paddingRight="0" visible="false"/>
<mx:Label id="lbl1" visible="false" text=">"
paddingTop="2" />
<mx:LinkButton id="lb2" visible="false" paddingLeft="0"
paddingRight="0"/>
<mx:Label id="lbl2" visible="false" paddingTop="2"/>
</mx:HBox>
<mx:Button label="click album" click="clickalbum(event);"
x="10" y="93"/>
<mx:Button label="click group" click="clickgroup(event);"
x="10" y="63"/>
<mx:Button label="click back to group"
click="clickback(event);" x="10" y="123"/>
</mx:Canvas>
</mx:Application>