dd内部的引导分区，对齐问题

Question

我试图在dd标记中对齐div标记。但是，div正在推出新的产品线。我必须使用div作为javascript选择器。

HTML

<dl class="dl-horizontal dl-horizontal-info">
    <dt>created</dt>
    <dd>2013-11-24 09:47:55 GMT</dd>

    <dt>uploaders</dt>
    <dd><i class="fa fa-arrow-up"></i> <div id="uploaders">445453</div></dd>

    <dt>downloaders</dt>
    <dd><i class="fa fa-arrow-down"></i> <div id="downloaders">123123</div> <a href="javascript" class="btn btn-default btn-xs pull-right" id="refreshbtn"><i class="fa fa-refresh"></i> Refresh</a></dd>

    <dt>Updated</dt>
    <dd id="date">2013-11-24 09:47:55 GMT</dd>
</dl>

CSS

@import url("http://netdna.bootstrapcdn.com/bootswatch/3.0.3/cerulean/bootstrap.min.css");
@import url("http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css");
@import url("http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css");


.dl-horizontal-info > dt{float:left;width:120px;overflow:hidden;clear:left;text-align:left;text-overflow:ellipsis;white-space:nowrap}
.dl-horizontal-info > dd{margin-left:130px}

错误/Y22ZH/

在上面的例子中，Div标记有id上传器，Div标记有id下载器，这两种标记都在新的线路上。如何才能获得与、dd、和图标相同的行。

Answer 1

要在同一行中显示上传器、和下载程序值，可以使用span标记而不是div标记。例如：

 <dl class="dl-horizontal dl-horizontal-info">
    <dt>created</dt>
    <dd>2013-11-24 09:47:55 GMT</dd>
    <dt>uploaders</dt>
    <dd><i class="fa fa-arrow-up"></i> <span id="uploaders">445453</span></dd>
    <dt>downloaders</dt>
    <dd><i class="fa fa-arrow-down"></i> <span id="downloaders">123123</span> <a href="javascript" class="btn btn-default btn-xs pull-right" id="refreshbtn"><i class="fa fa-refresh"></i> Refresh</a></dd>
    <dt>Updated</dt>
    <dd id="date">2013-11-24 09:47:55 GMT</dd>
</dl>

检查此链接：更新代码

Answer 2

将此CSS用于#上载器和#下载程序(或简单地说是dd > div)：

display: inline;

Answer 3

试试..。

dd div {
    display: inline-block;
}