Oct 10

Having a set of links listed horizontally across a page is a very common navigational element, and has been for some time. Having said links marked-up as elements in a list, and then organised thusly though CSS is a common (and sound) way of managing this, and something I have included in many past projects myself. However the code’s always ended up a little convoluted, using relative positioning and whatnot, and I happened to stumble across a super-simple and elegant way to do it today: using float.

ul { float: left; }

This’ll have each list item floated to the left of the following one, conveniently lining them all up horizontally. Of course, some extra CSS to change the list-style and so forth will be needed too, and probably clear whatever’s after it too, but this is so much easier than how I’d previously done it.

written by .klik2 \\ tags: , ,