将dt标签的数据移动到单行

时间:2015-09-22 11:53:52

标签: css angularjs twitter-bootstrap-3

我试图将数据放在单行中,如图所示(option2) https://drive.google.com/folderview?id=12yyvl18zmQUcwNrLtd8oOVKs_hL9t8mGeZxp6aLu-Q&usp=sharing

但是我会在下图中看到如下所示。任何想法如何在单行中获得如上所述。 https://drive.google.com/open?id=0B_-C_XOZHkVBZ1IweDhCRTlhcHdXbHBSMDNhMEVYRTNCdWFJ

这是我的CSS代码。

   dt:nth-child(4n+1), dt:nth-child(4n+1) + dd {
    background-color: silver;
    }
.dl-horizontal dt {
  max-width: 50%;
  text-overflow: inherit;
  white-space: normal;
  text-align: left;
  margin-left: 0px;
  padding:0px;
}

.dl-horizontal dd {
  margin-left: -1%;
  color: #6699FF;
  padding:0px;
}

我的HTML代码。

<div class="col-sm-2 tabularData" data-placement="bottom" data-toggle="tooltip">
                            <dl class="dl-horizontal">
                                <dt>Status</dt>
                                <dd class="ng-binding">APPR</dd>
                                <dt>Trade</dt>
                                <dd class="ng-binding">H</dd>
                                <dt class="ng-binding">Booking CSR</dt>
                                <dd class="ng-binding">criticaltester</dd>
                                <dt>L/D Svc</dt>
                                <dd class="ng-binding">PIZ - CY</dd>

                            </dl>
                        </div>

0 个答案:

没有答案