css - iOS sencha touch 中的列表元素填充

Question

我在 iPhone 中显示列表元素时遇到问题 图片中的“黑色”与元素披露图标重叠。我尝试使用 text-align: "right"对其进行样式设置，但没有发现任何区别。任何帮助将不胜感激

这是我的列表代码

itemTpl : [
    '<p style="font-family:arial;color:black;font-size:20px;">{DESCRIPTION}</p>',
    '<div style="font-size: 0.75em; color: darkgray">SKU:{CODE}</div>'
].join(''),

Answer 1

你不应该有这个问题，因为 Sencha 会根据文本调整元素披露图标。

无论如何，只要给 p 标签赋予宽度

CSS

.description{
 font-family:arial;
 color:black;
 font-size:20px; 
 width:90%; // reduce as you wish
}

.code {
 font-size: 0.75em; 
 color: darkgray;
}

列表代码

itemTpl : [
    '<p class="code ">{DESCRIPTION}</p>',
    '<div class="description">SKU:{CODE}</div>'
].join(''),

好吧，你还是想要内联样式

 itemTpl : [
    '<p style="font-family:arial;color:black;font-size:20px; width:90%;">{DESCRIPTION}</p>',
    '<div style="font-size: 0.75em; color: darkgray">SKU:{CODE}</div>'
 ].join(''),