Question

我在一个页面中有25个链接。我把它们分成两排。我这样介绍他们：

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

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

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

修改：它们不能更加细分。这是最小化版本链接表示国家名称，人名，书名等我不打算将它们分组。
例如：
“澳大利亚”“Der Kampf”“迈克尔杰克逊”“愤怒的葡萄麦当娜”

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

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

Live demo

Answer 2

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

Demo

Answer 3

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

以可读的方式呈现长链接列表HTML

3 个答案: