如何让2 dl并排？

Question

我试图让我的统计课程并排，但他们只是赢了。 我试过了display: inline-block，但它似乎也没有用。

问题：http://prntscr.com/7pdusz

.stats {
    display: inline-block;
    float: right;
    top: 50%;
    margin-top: -20px;
}
.stats dl {
    display: inline-block;
    float: left;
    min-width: 80px;
    padding: 0 6px;
    text-align: center;
    text-transform: uppercase;
    font-size: 11px;
    margin: 0;
}
.stats dd {
    display: block;
    color: rgb(184,184,184);
    font-size: 18px;
}
.stats dt {
    display: block;
    color: rgb(144,144,144);
}

和html在这里：

<td class="stats">
    <dl>
        <dd>2</dd>
        <dt>Topics</dt>
    </dl>
    <dl>
        <dd>2</dd>
        <dt>Replies</dt>
    </dl>
</td>

Answer 1

使用float:left;

.stats {
    display: inline-block;
    float: right;
    top: 50%;
    margin-top: -20px;
}
.stats dl {
    display: inline-block;
    float: left;
    min-width: 80px;
    padding: 0 6px;
    text-align: center;
    text-transform: uppercase;
    font-size: 11px;
    margin: 0;
}
.stats dd {
    display: block;
    color: rgb(184,184,184);
    font-size: 18px;
}
.stats dt {
    display: block;
    color: rgb(144,144,144);
}

dl {
  float:left;
  margin: 4px;
}

<td class="stats">
    <dl>
        <dd>2</dd>
        <dt>Topics</dt>
    </dl>
    <dl>
        <dd>2</dd>
        <dt>Replies</dt>
    </dl>
</td>

Answer 2

将您的代码包含在<table>中，并从margin-top类中删除dl。

.stats {
  display: inline-block;
  float: right;
  top: 50%;
}
.stats dl {
  display: inline-block;
  float: left;
  min-width: 80px;
  padding: 0 6px;
  text-align: center;
  text-transform: uppercase;
  font-size: 11px;
  margin: 0;
}
.stats dd {
  display: block;
  color: rgb(184, 184, 184);
  font-size: 18px;
}
.stats dt {
  display: block;
  color: rgb(144, 144, 144);
}

<table>
  <td class="stats">
    <dl>
      <dd>2</dd>
      <dt>Topics</dt>
    </dl>
    <dl>
      <dd>2</dd>
      <dt>Replies</dt>
    </dl>
  </td>
</table>