Mobile browser line wrapping span of links

Question

I have a header on our website that has a variable set of links that should be shown to the user in one row/line. For example:

<span class="logout">
   <a href="/schedule">My Schedule</a>
   <a href="/fullSchedule">Full Schedule</a>
   <a href="/timeline">Timeline</a>
   <a href="/roster">Roster</a>
   <a href="/logout">Log Out</a>
</span>

The CSS for the "logout" class is "float: right;" to make the links go to the right side of the page/header.

This works fine for us on regular computer browsers, but on mobile browsers (Android and Mobile Safari) we get the links being line wrapped to fit on the screen, even though a table below the header stretches off the screen several times over.

Our desired behavior on the phone is to have the navigation links run as one long line, even if they run off the visible screen. Trying to tap on links stacked on top of each other is problematic as it is easy to hit "Log Out" when you meant "My Schedule" right above it.

I've tried various CSS bits:

• white-space:nowrap; gave me a truncated list of links, which is not good.
• overflow seemed to have no effect.

Sadly, the best solution I've found so far is to put all the links into a table (one link per cell). But before I gave up and use a table, I figured I'd ask StackOverflow and see if there is a clever way to do it that I hadn't considered.

Update

Having played with Phlume's answer some, I think I understand my problem better. I'm trying to float the links right, but not let them wrap. That means, if the right side of the screen is too close in, it truncates to the left. I want it to not truncate at all, and stick off the right side (you can scroll to the right), but have any extra space be on the left. Not sure how to accomplish this.

Answer 1

You are placing block elements within a span... try changing the markup accordingly:

<ul class="logout">
   <li><a href="/schedule">My Schedule</a></li>
   <li><a href="/fullSchedule">Full Schedule</a></li>
   <li><a href="/timeline">Timeline</a></li>
   <li><a href="/roster">Roster</a></li>
   <li><a href="/logout">Log Out</a></li>
</ul>

Answer 2

I ended up realizing that the float: right; was a major part of my problem, so I got rid of it and changed my span into a div tag with "optional" breaks before it. The resulting HTML file looks like:

<br class="small_break"/><br class="small_break"/><br class="small_break"/>
<div class="logout">
   <a href="/schedule">My Schedule</a>
   <a href="/fullSchedule">Full Schedule</a>
   <a href="/timeline">Timeline</a>
   <a href="/roster">Roster</a>
   <a href="/logout">Log Out</a>
</div>

Here is the relevant CSS I used:

@media screen and (min-width: 650px) {
    .small_break {
        display:none;
    }
}

.logout {
    text-align: right;
    white-space: nowrap;
}

This hides the breaks with class "small_break" for screens with more than 650 pixels wide, allowing the navigation links to effectively float up beside the branding images which are float: left; . For smaller screens, the breaks appear, moving the links below the branding images.

The text-align:right; keeps my links in the div right aligned while the white-space: nowrap; keeps to browser from line wrapping the links.