0

1 ページに 25 個のリンクがあります。2列に分けて紹介します。私はそれらを次のように提示します：

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

お互いに優先順位がある場合は、タグ クラウドで提示します。ただし、ほとんどすべてのリンクの優先度は同じです。

より人間が読める形式でリンクを表示するには、どのような方法がよいでしょうか?
私はこれを試しました：
<span>link1<span> <code>link2</code> <span>link3<span> <code>link4</code>など..

編集：これ以上サブグループ化することはできません。これは最小化されたバージョンです。
リンクは国名、人名、本のタイトルなど
を表しています。サブグループ化する予定はありません。
例:
「オーストラリア」「闘争」「マイケル・ジャクソン」「怒りの葡萄マドンナ」

デザインとは、ユーザーが選択的知覚でタイトルを選択することです。したがって、ユーザーの認識をトリガーするために、それらを 1 つの段落にまとめる予定です。

4

3 に答える 3

1

Rohit は正しい方向に進んでいましたが、それでも 2 行で表示したい場合は、こちらの方が読みやすいと思います。

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

デモ

于 2012-08-01T16:41:56.423 に答える
1

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

ライブデモ

于 2012-08-01T08:57:48.183 に答える
0

いくつか試してみた結果、最良のアプローチはボタンリンクを使用することであることがわかりました。アンカー テキストはボタン タイトルになり、ボタンは URL にリンクします。主な利点は、ボタンの色を簡単に変更できること (twitter ブートストラップ) であり、行末を気にする必要がありません。

于 2012-08-23T18:01:40.190 に答える