减少导航栏Jquery Mobile上一个选项卡上的间距

Question

我的标题上有一个带有三个标签的导航栏，我还想为主页按钮添加第四个标签。只对主页图标，没有文字。我目前所拥有的是占用太多空间。它会截断移动设备上的其他选项卡。我该如何解决这个

<div data-role="navbar" data-iconpos="left" class="custom-navbar">
        <ul>
          <li><a href="fb_feed.html" data-prefetch="true" rel="external" data-icon="fbicon"> Facebook</a></li>
          <li><a href="youtube_feed.html" data-prefetch="true" rel="external" data-icon="yticon">YouTube</a></li>
          <li><a href="my_activity.html" id="my_activitypage" data-prefetch="true" data-icon="maicon" class="ui-btn-active ui-state-persist">My Activity</a></li>
          <li><a href="SocialStreamHome.html" data-icon="home" data-iconpos="left">&nbsp;</a></li>
        </ul>
    </div>

这就是

的样子

但是我想要这样的东西

我刚裁剪它以显示我只想要一个带有主页图标的小标签

Answer 1

工作示例：http://jsfiddle.net/Gajotres/jCLUm/

CSS：

.custom-navbar li {
    width: 30% !important;
}

.custom-navbar li.last {
    width: 10% !important;
}

.custom-navbar li.last a span .ui-icon {
    left: 25px !important;
}

里面还有另一个礼物。