CSS-製作LIST

我該怎麼辦somehing像thhs： enter image description here CSS-製作LIST

我嘗試這樣的事情：

<div class="servers"> 
     <ul> 
      <li><span class="icon"></li> 
      <li><span class="text">Public server#1</span></li> 
      <li>IP: 88.88.88.87:270115</li> 
      <li><MAPA: de_dust2/li> 
     </ul> 
    </div>

也可以嘗試喜歡的東西：

<li><span class="icon"></span><span class="text"> Public server#1</span></li><li><span class="text">IP:81.0.217.184:27020</span></li><li><span class="text">Mapa: de_dust2</span></li<span class="text">Hráči: 50/60</span></li>

與CSS：

.text { 
    display:inline-block; 
    overflow:hidden; 
    width: 170px; 
    height: 22px; 
    line-height: 22px; 
}

我知道它的愚蠢的問題，但我只是失去了我需要做同樣的空間betwween tihngs，只是不知道如何做到這一點簡單的:)

如果有一個人誰可以幫助我，我將非常thanksfull

來源

2014-04-10 user3009924

考慮你是顯示錶格數據，你可能要考慮使用一個實際的表，而不是一個有序列表。無論如何，你的清單設置是錯誤的。您可以在CSS中爲每個項目定義「圖標」作爲項目符號類型。 – durbnpoisn

使用表將在這裏是最好的辦法小提琴。 SEE THE DEMO

HTML

<table> 
    <tr> 
     <td><span class="icon"></span>Public Server#1</td> 
     <td>IP:87.45.26.27:27015</td> 
     <td>Mapa:de_dust2</td> 
     <td>Hraci: 16/32</td> 
     <td><a href="#">Detaily</a></td> 
    </tr> 
    ... 
</table>

CSS

tr { 
    display: block; 
    border-bottom: 1px solid #ccc; 
} 
td { 
    padding: 5px 20px; 
    white-space: nowrap; 
} 
.icon { 
    background: url(img.png) no-repeat; 
    background-size: 15px 15px; 
    padding-right: 20px; 
}

來源

2014-04-10 19:04:07 Morven

非常感謝您的回答:) – user3009924

這是表格實際適用的時間之一。

嘗試這樣的造型：

<table> 
    <tr> 
     <td class="icon"></td> 
     <td>Public server#1</td> 
     <td>IP: 88.88.88.87:270115</td> 
     <td>MAPA: de_dust2</td> 
    </tr> 
    <tr> 
     <td class="icon"></td> 
     <td>Public server#1</td> 
     <td>IP: 88.88.88.87:270115</td> 
     <td>MAPA: de_dust2</td> 
    </tr> 
    ... 
</table>

來源

2014-04-10 18:44:39 RyanS

感謝您的快速和真正有幫助的答案:) – user3009924

的表看起來像一個很好的路要走，這裏是一個小CSS小提琴。

<table> 
<tr><td>Public Server #1</td><td>IP: 88.87.65.43:27015</td><td>Mapa: de_dust2</td><td>Hraci: 16/32</td><td><a href="#">Detaily</a></td></tr> 
<tr><td>Public Server #1</td><td>IP: 88.87.65.43:27015</td><td>Mapa: de_dust2</td><td>Hraci: 16/32</td><td><a href="#">Detaily</a></td></tr> 
<tr><td>Public Server #1</td><td>IP: 88.87.65.43:27015</td><td>Mapa: de_dust2</td><td>Hraci: 16/32</td><td><a href="#">Detaily</a></td></tr> 
<tr><td>Public Server #1</td><td>IP: 88.87.65.43:27015</td><td>Mapa: de_dust2</td><td>Hraci: 16/32</td><td><a href="#">Detaily</a></td></tr> 
<tr><td>Public Server #1</td><td>IP: 88.87.65.43:27015</td><td>Mapa: de_dust2</td><td>Hraci: 16/32</td><td><a href="#">Detaily</a></td></tr> 
<tr><td>Public Server #1</td><td>IP: 88.87.65.43:27015</td><td>Mapa: de_dust2</td><td>Hraci: 16/32</td><td><a href="#">Detaily</a></td></tr> 
<tr><td>Public Server #1</td><td>IP: 88.87.65.43:27015</td><td>Mapa: de_dust2</td><td>Hraci: 16/32</td><td><a href="#">Detaily</a></td></tr> 
<tr><td>Public Server #1</td><td>IP: 88.87.65.43:27015</td><td>Mapa: de_dust2</td><td>Hraci: 16/32</td><td><a href="#">Detaily</a></td></tr> 
<tr><td>Public Server #1</td><td>IP: 88.87.65.43:27015</td><td>Mapa: de_dust2</td><td>Hraci: 16/32</td><td><a href="#">Detaily</a></td></tr> 
<tr><td>Public Server #1</td><td>IP: 88.87.65.43:27015</td><td>Mapa: de_dust2</td><td>Hraci: 16/32</td><td><a href="#">Detaily</a></td></tr> 
</table>

http://jsfiddle.net/sm8Y2/

來源

2014-04-10 18:48:11 DNACode

我會做這樣的事情

<div id="servers"> 
    <div class="server"> 
     <div class="icon"><img src="icon.png" /></div> 
     <div class="name">Server #1</div> 
     <div class="ip">88.88.88.88:27000</div> 
     <div class="map">office</div> 
    </div> 
    <div class="server"> 
     <div class="icon"><img src="icon.png" /></div> 
     <div class="name">Server #2</div> 
     <div class="ip">88.88.88.88:27000</div> 
     <div class="map">dust</div> 
    </div> 
</div>

這裏的風格http://jsfiddle.net/r84Du/

來源

2014-04-10 18:53:13 WackyWalrus

回答

相關問題