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

Question

我在我们的网站上有一个标头，其中包含一组可变的链接，应以一行/行向用户显示。 例如：

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

“注销”类的CSS为“ float：right;”。 使链接转到页面/标题的右侧。

在正常的计算机浏览器上，这对我们来说效果很好，但是在移动浏览器（Android和Mobile Safari）上，即使标题下方的表格在屏幕上延伸了数次，我们也会将链接换行以适合屏幕。

我们希望在电话上执行的操作是使导航链接沿一条长线运行，即使它们在可见屏幕上也不行。 尝试利用彼此堆叠的链接是有问题的，因为当您在其上方意为“我的日程安排”时，很容易点击“注销”。

我尝试了各种CSS位：

• 空白：nowrap; 给了我截断的链接列表，这不好。
• 溢出似乎没有任何作用。

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

更新资料

玩过Phlume的答案后，我想我对我的问题有了更好的了解。 我试图使链接正确浮动，但不要让它们环绕。 这意味着，如果屏幕的右侧过于靠近，则它会向左截断。 我希望它完全不截断，并停留在右侧（您可以向右滚动），但左侧应有多余的空间。 不确定如何完成此操作。

Answer 1

您正在将块元素放置在一个范围内...请尝试相应地更改标记：

<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

我最终意识到， float: right; 是我问题的主要部分，因此我摆脱了这个问题，并将其范围更改为div标签，并在其之前添加了“可选”的中断。 生成的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>

这是我使用的相关CSS：

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

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

这对于宽度超过650像素的屏幕隐藏了“ small_break”类的中断，从而使导航链接可以有效地悬浮在浮动的品牌形象旁边float: left; 。 对于较小的屏幕，会出现中断，将链接移动到品牌图片下方。

text-align:right; 使我的div中的链接正确对齐，同时保留white-space: nowrap; 避免浏览器将链接换行。