jQuery移动按钮图标位置太远了

Question

我正在使用JQM 1.4.2并尝试在使用类.ui-btn-icon-left时让按钮图标更接近文本。

我拍摄了一个屏幕截图并按照我希望它在中间按钮中查看的方式修改了列表图标。我似乎无法将图标从左侧移开。使用填充只是改变了顶部和底部。

我需要用什么课来完成这项课程？

<div data-role="navbar" >        
        <ul id="navfooter">
            <li><a href="#home"  class="ui-nodisc-icon ui-icon-home ui-btn-center ui-btn-active ui-state-persist svbtn"  data-transition="slide">Tour</a></li>
            <li><a  class="ui-nodisc-icon ui-icon-bars ui-btn-icon-left svbtn"  href="#listViewPage"  data-transition="slide" >List</a></li>
            <li><a  class="ui-nodisc-icon ui-icon-location ui-btn-icon-left svbtn" href="#map-page" data-transition="slide" >Map</a></li>                
        </ul>
    </div>

这是添加css后现在的样子

.ui-icon-home::after {
position: relative;
left:10px;   
}

Answer 1

您可以在按钮内设置图标的左侧位置：

.ui-navbar a:after {
    left: 20% !important;
}

但是，当按钮变小时，这将允许图标和文本重叠。

实现这一目标的更好方法可能是将图标与文本内联。您使用CSS在文本前面放置一个范围来放置图标。要控制图标和文本之间的距离，请调整边距右属性：

<div data-role="navbar">
    <ul>
        <li><a href="#"><span class="ui-icon-alert ui-btn-icon-notext inlineIcon"></span>Summary</a>
        </li>
        <li><a href="#" class="ui-btn-active"><span class="ui-icon-star ui-btn-icon-notext inlineIcon"></span>Favs</a>
        </li>
        <li><a href="#"><span class="ui-icon-gear ui-btn-icon-notext inlineIcon"></span>Setup</a>
        </li>
    </ul>
</div>

.inlineIcon {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    margin-right: 6px;
}

如果你想要黑色的图标，后面没有光盘，那么将ui-alt-icon类添加到span中并更改CSS以摆脱光盘：

<div data-role="navbar">
    <ul>
        <li><a href="#"><span class="ui-alt-icon ui-icon-alert ui-btn-icon-notext inlineIconNoDisk"></span>Summary</a>
        </li>
        <li><a href="#" class="ui-btn-active"><span class="ui-alt-icon ui-icon-star ui-btn-icon-notext inlineIconNoDisk"></span>Favs</a>
        </li>
        <li><a href="#"><span class="ui-alt-icon ui-icon-gear ui-btn-icon-notext inlineIconNoDisk"></span>Setup</a>
        </li>
    </ul>
</div>

.inlineIconNoDisk {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    margin-right: 6px;
}
.inlineIconNoDisk:after {
    background-color: transparent !important;
}

  

这是 DEMO ，显示所有3个选项

Answer 2

如果它只是您想要移动的主页图标，则应将以下内容应用于该图标应该可以修复它，但如果没有看到正在运行的菜单，很难说最佳解决方案是什么。

.ui-icon-home::after {
    left: (amount to shift left)px;
}

请注意::仅将样式应用于图标，而“.ui-icon-home”适用于整个锚元素。同样，如果你可以链接到一个pastebin或类似的东西，那么给你一个更好的答案会更容易。