javascript - 减少导航栏 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;
}

里面还有另一个礼物。