Herself’s Webtools

Suppose you have a list of links:
TimesToCome Mobile
Herselfs AI
Herself’s Houseplants

And you’d prefer to lay them out horizontally on your page like:

TimesToCome Mobile|Herselfs AI|Herself’s Houseplants

Or better yet, like the 3 social bookmark links at the bottom of this post are laid out.

This is especially useful for the list of social bookmarks at the bottom of your page.

You can in HTML just place the links one after the other with a ‘|’ in between. Or you can use CSS to line them up for you and space them out nicely. The float: left; is what makes your list horizontal instead of vertical.

#socialbookmarks ul
{
margin:0;
padding:0;
}

#socialbookmarks li {
float:left;
margin:0;
padding:0;
list-style-type: none;
white-space: nowrap;
}

#socialbookmarks li a
{
list-style-type: none;
padding: 0 18px;
font-size: 0.8em;
text-transform: uppercase;
letter-spacing: 1px;
}

The bookmarks are added in the form of an HTML list to the web page
<div id=”socialbookmarks”>
<ul>
<li> link 1 </li>
<li> link 2 </li>
<li> link 3 </li>
</ul>
</div>
<br />

You need a break ( br ) tag at the end to prevent the links from wrapping if the next item in your template is also a float item.