Html 如何在两行中显示链接？

基本上可以生成链接，根据用户的不同，可以是从一个链接到20个链接

这就是我想要的样子

但我如何确保它以这种方式添加链接

这是css（html代码在JSFIDLE中）

这就是它现在的样子：

感谢您的任何帮助

以下是您的建议

就这么简单

我只是在所有

文档列表中添加了两个额外的类
奇数
和
偶数

<div class="document-list">
<div class="document-item odd">
    <div class="number">1</div> <a href="#">Testing link 1</a> 
</div>
<div class="document-item even">
    <div class="number">2</div> <a href="#">Testing link 2</a> 
</div>
<div class="document-item odd">
    <div class="number">3</div> <a href="#">Testing link 3</a> 
</div>
<div class="document-item even">
    <div class="number">4</div> <a href="#">Testing link 4</a> 
</div>
<div class="document-item odd">
    <div class="number">5</div> <a href="#">Testing link 5</a> 
</div>
<div class="document-item even">
    <div class="number">6</div> <a href="#">Testing link 6</a> 
</div>
<div class="document-item odd">
    <div class="number">7</div> <a href="#">Testing link 7</a> 
</div>
<div class="document-item even">
    <div class="number">8</div> <a href="#">Testing link 8</a> 
</div>


1.
2.
3.
4.
5.
6.
7.
8.


和一块CSS代码

.odd {
    display: inline-block;
    float: left;
}
.奇怪{
显示：内联块；
浮动：左；
}
希望这有帮助。
将您的
文档项更改为

.document-item {
   margin-bottom:8px;
   display:inline-block;
   width:calc(50% - 40px);
}

您可以只添加以下样式：

.document-item {
    margin-bottom:8px;
    width:50%; 
    float:left;
}


还要注意以下几个改进：

.number {
    display: inline-block;
    border: 1px solid #0084c9;
    border-radius: 50%;  
    color: #0084c9;
    text-align: center;
    width:  1.3em; /* don't use padding for that ... */
    height: 1.3em;
}

我的解决方案是设置宽度，例如50%和向左浮动

.document-item {
    margin-bottom:8px;
    width: 50%;
    float: left;
}

你可以尝试使用

li:nth-child(odd) {
    float: left
}
li:nth-child(even) {
    float:right
}

以下是我的看法：

html格式

<div class="document-list">
    <div class="document-item">
        <div class="number">1</div> <a href="#">Testing link 1 </a> 
    </div>
    <div class="document-item">
        <div class="number">2</div> <a href="#">Testing link 2</a> 
    </div>
    <div class="document-item">
        <div class="number">3</div> <a href="#">Testing link 3</a> 
    </div>
    <div class="document-item">
        <div class="number">4</div> <a href="#">Testing link 4</a> 
    </div>
    <div class="document-item">
        <div class="number">1</div> <a href="#">Testing link 1</a> 
    </div>
    <div class="document-item">
        <div class="number">5</div> <a href="#">Testing link 5</a> 
    </div>
    <div class="document-item">
        <div class="number">6</div> <a href="#">Testing link 6</a> 
    </div>
</div>

请参见此处的演示：
在CSS下添加此CSS

CSS代码：

.document-item:hover a{
    color:#91c64e;
}
.document-item:hover .number{
    display: inline-block;
    border: 1px solid #91c64e;
    background-color:#91c64e;
    border-radius: 50000px;
    color: #FFF;
    text-align: center;
    padding: 1px 5px 1px 5px;
}

您还可以提供html吗？您可以在jsfiddleuse表中找到它以实现此目的尝试此检查此jsfiddle我尝试了您的，根据文本长度，它如下所示：
.document-list {
    margin-top:20px;
    padding-left:40px;
    padding-bottom:15px; width:100%;
}
.number {
    display: inline-block;
    border: 1px solid #0084c9;
    border-radius: 50%;
    color: #0084c9;
    text-align: center;
    padding: 1px 5px 1px 5px;
}
.document-item {
    margin-bottom:8px;
    float:left;
    width:50%
}

.document-item:hover a{
    color:#91c64e;
}
.document-item:hover .number{
    display: inline-block;
    border: 1px solid #91c64e;
    background-color:#91c64e;
    border-radius: 50000px;
    color: #FFF;
    text-align: center;
    padding: 1px 5px 1px 5px;
}