以可讀的方式呈現長鏈接列表HTML

我在一個頁面中有25個鏈接。我將它們呈現在兩行中。我介紹他們是這樣的：以可讀的方式呈現長鏈接列表HTML

link1 - link2 - link3 - ... 
link12 - .... link25

如果他們彼此之間的優先事項我會提出他們在一個標籤雲。但幾乎所有的鏈接都具有相同的優先級。

以更易於閱讀的格式顯示鏈接的更好方法是什麼？
我嘗試這樣做：
<span>link1<span> <code>link2</code> <span>link3<span> <code>link4</code>等。

編輯：他們不能更subgrouped。這是最小化的版本。
鏈接表示國家名稱，人名，書名等
我不打算分組他們。
例如：
「澳大利亞」「明鏡奮鬥」，「邁克爾·傑克遜」憤怒的麥當娜「葡萄」

設計是用戶選擇具有選擇性知覺的標題。因此，爲了觸發用戶的看法，我計劃將它們放在一個段落中。

來源

2012-08-01 trante

他們有任何分類嗎？他們可以分組嗎？字母順序是否有意義？是否所有這些都需要同時顯示，或者您是否可以旋轉鏈接查看器？將圖像用作創建5x5矩陣的不同鏈接的圖標是否合理？ – 2012-08-01 08:58:09

我個人開始質疑是否有更好的方式來處理它，而不是將所有25個鏈接放在一起。他們可以細分爲小組嗎？你可以只有一個鏈接，而不是導致索引頁面，然後讓你有一個頁面上的所有25個鏈接，你可以做一些更好的與他們？可悲的是，如果不知道網頁的其他部分是什麼樣子的話，這個問題就不會真正負責。沒有一個適合所有情況的好答案。我會說25條鏈接的最好方法是25條線，但這可能不符合你想要的... – Chris 2012-08-01 08:58:22

我編輯了這個問題。 – trante 2012-08-01 10:11:41

經過一些試用後，我發現最好的方法是使用按鈕鏈接。錨文本成爲按鈕標題，按鈕鏈接到URL。主要優點是輕鬆改變按鈕顏色（twitter bootstrap），我不需要對線條的末端感到好奇。

來源

2012-08-23 18:01:40 trante

用於white-space屬性，這樣

HTML

<div class="parent"> 
<a href="#">Link text</a><a href="#">Link text</a><a href="#">Link text</a><a href="#">Link text</a> 
<a href="#">Link text</a><a href="#">Link text</a><a href="#">Link text</a><a href="#">Link text</a> 
<a href="#">Link text</a><a href="#">Link text</a><a href="#">Link text</a><a href="#">Link text</a> 
</div>

的CSS

.parent { 
white-space:nowrap; 
} 

    .parent a{ 
    display:inline-block; 
    vertical-align:top; 
    white-space:normal; 
    }

Live demo

來源

2012-08-01 08:57:48

羅希特是在正確的軌道上，但我覺得這可能是一個有點易於閱讀，如果你仍然希望他們在兩行：

HTML：

<div class="parent"> 
    <p> 
     <a href="#">Link1</a>, <a href="#">Link2</a>, <a href="#">Link3</a>, <a href="#">Link4</a>, 
     <a href="#">Link5</a>, <a href="#">Link6</a>, <a href="#">Link7</a>, <a href="#">Link8</a>, 
     <a href="#">Link9</a>, <a href="#">Link10</a>, <a href="#">Link11</a>, <a href="#">Link12</a>, 
     <a href="#">Link13</a>, <br><a href="#">Link14</a>, <a href="#">Link15</a>, <a href="#">Link16</a>, 
     <a href="#">Link17</a>, <a href="#">Link18</a>, <a href="#">Link19</a>, <a href="#">Link20</a>, 
     <a href="#">Link21</a>, <a href="#">Link22</a>, <a href="#">Link23</a>, <a href="#">Link24</a>, 
     <a href="#">Link25</a> 
    </p> 
</div>

CSS：

.parent { 
    white-space:nowrap; 
} 

.parent a{ 
    display:inline-block; 
    vertical-align:top; 
    white-space:normal; 
}

Demo

來源

2012-08-01 16:41:56 Alwaysdeadfred

以可讀的方式呈現長鏈接列表HTML

回答

相關問題