手機瀏覽器線路環繞鏈接

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

我最終意識到的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; 
} 

這隱藏了類「small_break」爲超過650個像素寬屏幕的休息，讓導航鏈接有效地漂浮在float: left;的品牌形象旁邊。對於較小的屏幕，會出現中斷，將鏈接移動到品牌圖像下方。

text-align:right;保持我的鏈接在div右對齊，而white-space: nowrap;保持瀏覽器從包裝鏈接的行。

Answer 2

你把塊級元素的跨度內...嘗試改變相應的標記：

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