Question

I am trying to modify/update a webmail script where i want to have two hyperlinks inside a li tag without the second link wrapping to the next line. I also want to have the whole <li> to be clickable, similar to what yahoo mail has.
I have searched on here and googled but can’t find anything that works.

this is what isnt working:

<div class="vertical">
<ul>
<li><a href="#">Folders</a></li>
<li><a href="#">Inbox</a></li>
<li><a href="#">Drafts</a></li>
<li><a href="#">Sent</a></li><br/>
<li><a href="#">Trash </a><a href="#">[empty]</a></li>
</ul>
</div>

This is the code i have so far including the css that i cant get it to work.

http://jsfiddle.net/z4gQC/33/

Thanks in advance for any help.

Answer 1

See working example here: http://jsfiddle.net/pratik136/z4gQC/26/

Change your CSS to:

div.vertical
{
    width:100%;
    height:80px;
}
div.vertical ul
{
    list-style-type:none;
    margin:0;
    padding:0;
}
div.vertical li
{
    float:left;
    width:200px;   
    background-color:#f3f3f3;
}
div.vertical a
{
    display: inline-block; 
    width:50px;   
}
div.vertical a:link,div.vertical a:visited
{
    font-weight:bold;
    color:#666666;
    text-align:left;
    padding:8px;
    text-decoration:none;
}
div.vertical li:hover,div.vertical a:active
{
    background-color:#d4d4d4;
}
span 
{
    display: table-cell;
    vertical-align: middle;
}​

---

Edit:

OP requested the [empty] one to be right aligned.

Fiddle: http://jsfiddle.net/pratik136/z4gQC/35/

Add a class to <a href="#">[empty]</a> as

<a href="#" class="right">[empty]</a>

And add the following to your CSS:

div.vertical a.right:link, div.vertical a.right:visited{
    text-align: right;
}

​