Question

我怎么能像thhs那样做事： enter image description here

我尝试这样的事情：

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

我知道它的愚蠢问题，但我只是迷失了我需要在tihngs之间做出相同的空间，并且根本不知道如何做到这一点：）

如果有人可以帮助我，我将非常感谢

Answer 1

这是表格实际适用的次数之一。

尝试设计：

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

Answer 2

我会做这样的事情

<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/

的小提琴

Answer 3

使用Table将是最好的方法。的 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; }

Answer 4

表格看起来是一个很好的方法，这里有一个小小的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/

CSS-制作列表

4 个答案: