定位其中的div和span文本

我已經嘗試了很多東西，但無法獲得所需的格式。 HTML：定位其中的div和span文本

<div class="usertype"> 
      <div class="type1"> 
       <span class="type-heading">type1 is here</span> 
       <span class="type-description">10 types have joined</span> 
       <span class="type-description">35 type will.</span> 
      </div> 
      <div class="type2"> 
       <span class="type-heading">type2 is here</span> 
       <span class="type-description">10 types are there</span> 
       <span class="type-description">35 type will.</span> 
      </div> 
      <div class="type1"> 
       <span class="type-heading">type23 is good</span> 
       <span class="type-description">50 types are there</span> 
       <span class="type-description">50 types are there</span> 
       <span class="type-description">for 2 months</span> 
      </div> 
      <div class="type2"> 
       <span class="type-heading">Type4 at last</span> 
       <span class="type-description">50 types are there</span> 
       <span class="type-description">makes their first $20</span> 
       <span class="type-description">50 types are there</span> 
       <span class="type-description">35 type will.</span> 
      </div> 
      </div>

CSS：

div.usertype { 
    margin-top: 1em; 
} 
div.type1 { 
    float: left; 
    margin-left: 2em; 
} 
span.type-heading { 
    font-size: 14px; 
    color: #f7f7f7; 
} 

span.type-description { 
    font-size: 14px; 
    color:#959595; 
    display: block; 
}

輸出： Output

我想要什麼：

減小跨度之間的垂直距離與type-description類。我嘗試使用line-height和padding-bottom，但無法移動它。可能是一些父div有display:block。
所有類型描述都與現在居中的左側對齊。如果我用它float: left，它完全破壞了格式。

請幫忙。

來源

2013-03-24 Himanshu Yadav

好像你遺漏了一些CSS。重現此操作不會生成您發佈的示例圖片。 – j08691 2013-03-24 02:58:57

你的意思是這樣的嗎？ http://jsfiddle.net/WfdLN/ – kufudo 2013-03-24 03:00:55

<div class="usertype"> 
<div class="type1"> 
<span class="type-heading">type1 is here</span> 
<span class="type-description">10 types have joined</span> 
<span class="type-description">35 type will.</span> 
</div> 
<div class="type2"> 
<span class="type-heading">type2 is here</span> 
<span class="type-description">10 types are there</span> 
<span class="type-description">35 type will.</span> 
</div> 
<div class="type1"> 
<span class="type-heading">type23 is good</span> 
<span class="type-description">50 types are there</span> 
<span class="type-description">50 types are there</span> 
<span class="type-description">for 2 months</span> 
</div> 
<div class="type2"> 
<span class="type-heading">Type4 at last</span> 
<span class="type-description">50 types are there</span> 
<span class="type-description">makes their first $20</span> 
<span class="type-description">50 types are there</span> 
<span class="type-description">35 type will.</span> 
</div> 
</div> 

<style> 

div.usertype { 
    margin-top: 1em; 
} 
div.type1 { 
    float: left; 
    margin-left: 2em; 
} 
div.type2 { 
    float: left; 
    margin-left: 2em; 
} 
span.type-heading { 
    font-size: 14px; 
    color: #f7f7f7; 
} 

span.type-description { 
    font-size: 14px; 
    color:#959595; 
    display: block; 
    line-height:15px; 
} 
</style>

來源

2013-03-24 19:09:16

定位其中的div和span文本

回答

相關問題