html - bootstrap dl 列表未显示在 fontawesome 图标的一侧

Question

我有图标和 dl 列表，可以像这样一起显示:

.phone {
    font-size: 10px;
    background: #333 none repeat scroll 0% 0%;
    color: #262626;
    border-radius: 3px;
    padding: 30px 23px;
}
.dl-horizontal dt {
    line-height: 15px;
    margin-top: 3px;
    padding-left: 10px;
}
.dl-horizontal {
    color: #000;
    font-size: 11px;
}
.col-md-4 i {
    margin: 0px 0px 0px 10px !important;
}
.col-md-12 i {
    margin: 0px 12px 0px 15px;
}

HTML:

<div class="ef-widget-inner">
    <div class="col-md-12 col-lg-12 nopadding"> <i class="fa fa-phone phone"></i>

        <dl class="dl-horizontal"> <dt>Title 1.................</dt>

            <dd><a href="contact.php"><span><i>28311</i></span></a>
            </dd> <dt>Title 2</dt>

            <dd><a href="contact.php"><span><i>28312</i></span></a>
            </dd> <dt>Title 3</dt>

            <dd><a href="contact.php"><span><i>28314</i></span></a>
            </dd>
        </dl>
    </div>
</div>

但是，dl 列表显示在图标底部。我怎样才能在图标的一侧显示 dl 列表？!

演示 HERE

Answer 1

你需要给.dl-horizo​​ntal css属性display: inline-block，否则会显示为block占据宽度的 100%。

.phone {
  font-size: 10px;
  background: #333 none repeat scroll 0% 0%;
  color: #262626;
  border-radius: 3px;
  padding: 30px 23px;
}
.dl-horizontal dt {
  line-height: 15px;
  margin-top: 3px;
  padding-left: 10px;
}
.dl-horizontal {
  color: #000;
  font-size: 11px;
  display: inline-block;
}
.col-md-4 i {
  margin: 0px 0px 0px 10px !important;
}
.col-md-12 i {
  margin: 0px 12px 0px 15px;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<div class="ef-widget-inner">
  <div class="col-md-12 col-lg-12 nopadding"> <i class="fa fa-phone phone"></i>
    <dl class="dl-horizontal"> <dt>Title 1.................</dt>
      <dd><a href="contact.php"><span><i>28311</i></span></a>
      </dd> <dt>Title 2</dt>

      <dd><a href="contact.php"><span><i>28312</i></span></a>
      </dd> <dt>Title 3</dt>

      <dd><a href="contact.php"><span><i>28314</i></span></a>
      </dd>
    </dl>
  </div>
</div>