Question

可以生成基本链接，它可以是从一个链接到20个链接的任何内容，具体取决于用户。

这就是我希望它看起来的方式

但是我怎样才能确保它以这种方式添加链接？

这是css（html代码在jsfiddle中）

.document-list {
    margin-top:20px;
    padding-left:40px;
    padding-bottom:15px;
}
.number {
    display: inline-block;
    border: 1px solid #0084c9;
    border-radius: 50000px;
    color: #0084c9;
    text-align: center;
    padding: 1px 5px 1px 5px;
}
.document-item {
    margin-bottom:8px;
}

这就是现在的样子：

JSFIDDLE

感谢任何形式的帮助

Answer 1

您只需添加以下样式：

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

Example

还要注意这几项改进：

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

Answer 2

我的解决方案是设置宽度，例如50％并向左浮动。

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

Answer 3

这里是fiddle。

这很简单。

我只需向odd所有even添加两个额外的课程.document-list和<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}}

一块CSS代码。

.odd {
    display: inline-block;
    float: left;
}

希望这有帮助。

Answer 4

将您的document-item更改为

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

Answer 5

您可以尝试使用

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

这是我的看法：

http://jsfiddle.net/6P5xg/4/

Answer 6

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 Style

给宽度：100％到（.document-list），在.document-item中使用float：left;宽度：50％

.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%
}

在此处查看演示：http://jsfiddle.net/Efc4V/

Answer 7

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

如何在2行中显示链接？

7 个答案: