jQuery Mobile:尝试在某些文本中间显示一个图标

jQuery Mobile: Trying to get an icon to display in the middle of some text

本文关键字：显示 图标 一个 中间 文本 Mobile jQuery      更新时间：2023-09-26

我试图让图标显示在"一些文本"一词的中间。

谁能建议？

http://jsfiddle.net/LZxxB/50/

<div>
    <div style="display:inline-block;">some</div>
<span class='ui-btn-icon-notext ui-icon-arrow-u-l' style="display:inline-block;"></span>
    <div style="display:inline-block;">text</div>
</div>

这里有一种方法可以做到这一点。你基本上做一个不是按钮的图标按钮。

该 HTML：

<div>
    <div style="display:inline-block;">some</div>
    <span class="ui-nodisc-icon ui-alt-icon nonbuttonicon" >
        <span class="ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-inline"></span>
    </span>
    <div style="display:inline-block;">text</div>
</div>

CSS：

.nonbuttonicon .ui-btn {
    background: transparent;
    cursor: default;
    border: 0;
    margin: 0;
}
.nonbuttonicon .ui-btn:hover{
    background: inherit;
}

演示

更新：

这是一种不使用jQM按钮和单个跨度的方法：

<div>
    <div style="display:inline-block;">some</div>   
    <span class="ui-alt-icon ui-icon-delete ui-btn-icon-notext inlineIcon"></span>    
    <div style="display:inline-block;">text</div>
</div>
.inlineIcon  {
    display: inline-block;
    position: relative;
    vertical-align: middle;
}
.inlineIcon:after{
    background-color: transparent;
}

更新的演示

如果您喜欢圆形磁盘顶部的白色图标，CSS将变得更加简单：

<span class="ui-icon-delete ui-btn-icon-notext inlineIcon"></span>
.inlineIcon  {
    display: inline-block;
    position: relative;
    vertical-align: middle;
}

演示

这些代码行将重置以不同方式显示它的 jquery 移动 css。您可能需要对其进行一些调整以满足您的需求。

div span.ui-icon-arrow-u-l:after {position:relative;}
div span.ui-icon-arrow-u-l {display:inline-block;height:30px;margin-top:0;width:16px;}

希望这有帮助。

相关文章：