移動瀏覽器換行鏈接的范圍

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; 避免瀏覽器將鏈接換行。