SAPUI5 ObjectListItem图标未对齐

Question

我在我的SAPUI5中使用带有图标的ObjectListItem，但图标并不总是与文本对齐。

我有：

<List>
<ObjectListItem title="title" type="Active" number="{/data/value}"
icon="{= ${/data/value === '1' ? 'sap-icon://accept' : 'sap-icon://decline'}">
</ObjectListItem>
</List>

和样式：

.sapMObjLIconDiv {
    float: right;
    height: 0;}

.sapMObjLIcon.sapUiIcon {
    font-size: 18px;
    line-height: 1.5rem;
    margin: 0 auto;}

和值有不同的长度，有时图标会显示在文本上方：

由于

Answer 1

您的自定义CSS是重叠的原因。您可以为文本添加边距，使其不与图标重叠。

.sapMObjLNumberDiv{
    margin-right:60px;
}

另外，我建议您将自定义CSS类添加到List并应用相对于该类的所有样式。这将防止使用类似标准类的其他控件出现任何问题。