如何顯示2行中的鏈接？

基本上可以生成鏈接，它可以是從一個鏈接到20個鏈接的任何內容，具體取決於用戶。如何顯示2行中的鏈接？

這是我希望它看起來

但我怎麼能確保它添加鏈接以這種方式？

這是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

任何形式的幫助表示讚賞

來源

2014-04-25 Obsivus

你能提供的HTML藏漢？ – Himmators

你可以找到它在jsfiddle – Obsivus

使用表來實現這個 –

你可以添加以下樣式：

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

來源

2014-04-25 07:48:43 Pete

+1就是這樣。不錯的一個 –

這是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>

和CSS代碼塊。

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

希望這會有所幫助。

來源

2014-04-25 07:45:47

更改document-item如，

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

來源

2014-04-25 07:48:35

我的解決方案是設置寬度，例如50％並向左浮動。

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

來源

2014-04-25 07:48:48 Dimt

您可以嘗試使用

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

這是我的看法：

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

來源

2014-04-25 07:49:42 Snowie

檢查這個jsfiddle我試過了，取決於文本的長度，它看起來像這樣：http://jsfiddle.net/6P5xg/4/ – Obsivus

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樣式

給出寬度：100％到（。document-list）和in。文檔項目使用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/

來源

2014-04-25 07:51:47 Docter

添加這個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; 
}

來源

2014-04-25 07:52:32 anik4e

如何顯示2行中的鏈接？

回答

相關問題