Html 移动浏览器链接的换行范围

我在我们的网站上有一个标题，它有一组可变的链接，应该以一行/行的形式显示给用户。例如：

<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>

“logout”类的CSS是“float:right；”，以使链接转到页面/标题的右侧

这对我们来说在普通的电脑浏览器上很好，但在移动浏览器（Android和mobile Safari）上，我们可以将链接进行换行，以适应屏幕，即使标题下的表格在屏幕上延伸了好几次

我们在手机上的期望行为是让导航链接作为一条长线运行，即使它们在可见屏幕上运行。试图点击堆叠在彼此之上的链接是有问题的，因为当你在上面指的是“我的日程表”时，很容易点击“注销”

我尝试了各种CSS位：

• 空白：nowrap；给了我一个截断的链接列表，这是不好的
• 溢出似乎没有效果

遗憾的是，到目前为止，我找到的最佳解决方案是将所有链接放在一个表中（每个单元格一个链接）。但在我放弃使用桌子之前，我想我应该问问StackOverflow，看看是否有一种我没有考虑过的聪明方法

更新

---

玩了一些Phlume的答案后，我想我更了解我的问题。我试图使链接正确浮动，但不让它们缠绕。这意味着，如果屏幕的右侧太近，它会向左侧截断。我希望它不截断，并坚持在右边（你可以滚动到右边），但有任何额外的空间在左边。不确定如何完成此操作。

您正在将块元素放置在跨度内。。。尝试相应地更改标记：

<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>

我最终意识到

浮点：正确

是我问题的主要部分，所以我把它去掉，把span改成一个div标记，前面有“optional”分隔符。生成的HTML文件如下所示：

<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>

对于宽度超过650像素的屏幕，这隐藏了“small_break”类的中断，允许导航链接有效地浮动在

float:left的品牌图像旁边。对于较小的屏幕，会出现中断，移动品牌图像下方的链接

文本对齐：右
保持div中的链接右对齐，而
空白：nowrap阻止浏览器对链接进行换行。
花了一些时间来处理这个问题，但基本上都是在同一个地方结束的。似乎在UL元素上有float:right，在其旁边的表上有float:left会覆盖display:inline。有没有技巧让它以内联方式显示并右/左浮动？
@media screen and (min-width: 650px) {
    .small_break {
        display:none;
    }
}

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