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>

“logout”类的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;保持浏览器不包含链接。

移动浏览器行包装链接的跨度

2 个答案: