0

我在一页中有 25 个链接。我将它们分成两行。我这样介绍它们：

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

如果它们彼此之间有优先级，我会将它们呈现在标签云中。但是几乎所有的链接都具有相同的优先级。

以更易于阅读的格式呈现链接的更好方法是什么？
我试过这个：
<span>link1<span> <code>link2</code> <span>link3<span> <code>link4</code>等..

编辑：他们不能再分组了。这是最小化版本。
链接表示国家名称、人名、书名等。
我不打算对它们进行分组。
例如：
《澳大利亚》《奋斗》《迈克尔·杰克逊》《愤怒的葡萄麦当娜》

设计是让用户选择具有选择性感知的标题。因此，为了触发用户的感知，我计划将它们放在一个段落中。

4

3 回答 3

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 回答
1

Rohit 是在正确的轨道上，但我觉得如果你仍然希望它们在两行上，这可能会更容易阅读：

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 回答
0

经过一些试用后，我发现最好的方法是使用按钮链接。锚文本变成了按钮标题和链接到 URL 的按钮。主要优点是可以轻松更改按钮颜色（twitter bootstrap），我不需要对行尾感到好奇。

于 2012-08-23T18:01:40.190 回答