dd内的Bootstrap Div，对齐问题

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}

http://jsfiddle.net/whats_wrong/y22ZH/

在上面的例子中具有Div标签ID上传和具有Div标签ID下载者越来越上的新线。 我怎样才能和dd和icons处于同一行。

Answer 1

将此CSS用于#uploaders和#downloaders（或简单地dd> div）：

display: inline;

Answer 2

试试吧..

dd div {
    display: inline-block;
}

Answer 3

您要向div添加style: "display: inline"或div { display: inline }以使其显示在同一行上

Answer 4

要在同一行中显示上传者和下载 者的值，可以使用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>

检查此链接： 更新的代码