Invisible anchor with fixed width

[Christoph Burschka]

I need to generate an invisible anchor element (JS widget) to overlay
the list style icon in a nested list.

I'm currently doing this with the following markup:

<ul class="tree">
<li class="item">
<a class="menu-icon" href="#">&nbsp;&nbsp;</a>
<a class="menu-link" href="/menu/link">Menu Link</a>
<ul class="tree">
...
</ul>
</li>
</ul>

And the following CSS:

a.menu-icon {
position: relative;
left: -2em;
margin-right: -1em;
}

Needless to say, the &nbsp; is extremely ugly, and very likely to break
with different text sizes and different fonts (this mechanism is part of
a module that will be used with many different layouts)

Unfortunately, forcing the link width with a.menu-icon { width: 16px; }
didn't work, and if I use a "display:block", the menu link will be
broken to the next line.

Is there a way to set a fixed width on this invisible anchor?

Thanks,

 

[Christoph Burschka]

Unfortunately, forcing the link width with a.menu-icon { width: 16px; }
didn't work, and if I use a "display:block", the menu link will be
broken to the next line.

Is there a way to set a fixed width on this invisible anchor?

Yay! I'd forgotten about good old float.

By setting display:block and float:left on the anchor element, I was
able to both set its width and keep it on the same line as the link.