不敢相信我在这个简单的任务上挣扎了多少。将jQuery Mobile数据图标放置在用户不与之交互的元素上的正确方法是什么？如果我想要一个仅向用户显示消息的段落，例如“找不到合适的批次”，而我希望该元素具有“信息”图标，该怎么办？
我知道这不会做，但是类似：
<p data-role="content" data-icon="info" class="my-message-block">No suitable lots were found</p>
没有链接。不是按钮，复选框或...。只是显示消息的普通旧框？我看到的所有示例都是交互式元素，而不是静态元素。
提前致谢。
我通过添加一些CSS跨度来做到这一点，如下所示：
<p data-role="content" class="my-message-block"><span class="ui-icon-info ui-btn-icon-notext inlineIcon"></span>No suitable lots were found</p>
然后，inlineIcon该类具有以下规则来放置图标：
.inlineIcon {
display: inline-block;
position: relative;
vertical-align: middle;
margin-right: 6px;
}
右边距控制图标和文本之间的间隔。
如果您希望黑色图标后面没有灰色磁盘，请执行以下操作：
<p class="my-message-block"><span class="ui-alt-icon ui-icon-info ui-btn-icon-notext inlineIconNoDisk"></span>No suitable lots were found</p>
.inlineIconNoDisk {
display: inline-block;
position: relative;
vertical-align: middle;
margin-right: 6px;
}
.inlineIconNoDisk:after {
background-color: transparent;
}
ui-alt-icon在span上更改图标颜色，并background-color: transparent;在：after伪元素上隐藏磁盘。
这是一个演示
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句