Question

我正在尝试对齐无序列表元素，但我无法弄清楚如何。因此，在列表中，我显示了3个元素 - key，value和+符号。目前元素未对齐。但这就是我想在框内显示内容的方式。。

它的外观

此外，如果内容量增加，那么它会溢出框。我想知道如何正确地将我的元素设置为像pic中那样对齐。

<div ng-controller="stockCtrl">
    <section class="pickstocks">
        <label class="basiclabel">Pick Stocks</label>
        <div class="infoone">
            <p>Showing matching stocks</p>
            <button>Apply Filters</button>
        </div>
        <div class="stockpage">
            <ul id="nav">
                <li ng-repeat="(key,value) in stocks | objLimitTo:8">
                    {{key +"&nbsp;&nbsp;&nbsp;&nbsp;"+ value + "&nbsp;&nbsp;" + "+"}}
                </li>
            </ul>
        </div>
    </section>

    <section class="pickstocks">
        <label class="basiclabel">Manage Portfolio</label>
        <div>
            <table>
                <tr>
                <th>STOCK</th>
                <th>PRICE</th>
                <th>SHARES</th>
                <th>WEIGHT</th>
                </tr>
            </table>
        </div>
    </section>
</div>

Answer 1

您需要修复任一组件的宽度，例如完整框或键或框高。因为如果要固定键宽，对于大键值，框的高度可能会有所不同。以下是您需要添加到键，值和范围的类。＆＃39; +＆＃39;登录

.key-value {
  width: 90%;
  display: inline-block;
  word-wrap: break-word;
}

.plus {
  display: inline-block;
}

 <li ng-repeat="(key,value) in stocks | objLimitTo:8" >
 <span class="key-value"> {{key +"&nbsp;&nbsp;&nbsp;&nbsp;"+ value}} </span>
 <span class="plus">+</span>
 </li>

这里的工作插件示例https://plnkr.co/edit/plS1vxqgpqJniAUNeTK5?p=preview 如果您不希望即使对于大键值也要改变框的高度，那么请

#nav li { width: auto }

如何在使用角度表达式显示的无序列表中对齐内容？

1 个答案: