Question

我有像这样的show和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列表？！

demo HERE

Answer 1

您需要提供date-share.php css属性date-share.php，否则它将显示为$this->load->view('template/date-share.php');，占据宽度的100％。

.dl-horizontal

display: inline-block

bootstrap dl list不显示在fontawesome图标的一侧

1 个答案: