1

我尝试了很多东西，但无法获得所需的格式。HTML：

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

输出： 输出

我想要的是：

  1. 使用 class 减小跨度之间的垂直距离type-description。我尝试使用line-height但padding-bottom无法移动它。可能是某些父 div 具有display:block.
  2. 所有类型描述左对齐，现在居中。如果我使用它float: left，它会完全破坏格式。

请帮忙。

4

1 回答 1

0 
<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-24T19:09:16.257 回答