html - 导航栏中的 Li 元素未填充导航栏的可用空间

Question

我使用 PhoneGap 和 jQuery Mobile 制作了一个混合移动应用程序。 我做了一个页脚导航栏，我的问题是导航栏的列表元素没有填满导航栏的可用空间，只有第 4 个列表元素，其他 3 个短了一点，并且在导航栏的底部。这是 HTML 代码:

<div data-role="footer" data-position="fixed" data-tap-toggle="false">
 <div data-role="navbar" class="ui-custom-navbar">
  <ul id="navbarul">
   <li><a href="#"><img src="img/lips.png" /><p>thing_1</p></a></li>
   <li><a href="#"><img src="img/lips.png" /><p>thing_2</p></a></li>
   <li><a href="#"><img src="img/lips.png" /><p>thing_3</p></a></li>
   <li><a href="#"><img src="img/lips.png" /><p>thing_4</p></a></li>
  </ul>
 </div>
</div>

直到我为图像设置 max-width: 100%; 之后问题才出现。 CSS 文件中的属性，因为没有它图像会太大。 这是 CSS 代码:

.ui-custom-navbar a {
     background-color: #3BA6D2 !important;
}

.ui-custom-navbar a:hover{
     background-color: #317996 !important;
}

.ui-custom-navbar p {
     color: #ffffff !important;
     text-shadow: none;
     margin-top: 0;
     margin-bottom: 0;
     text-align: center;
}

.ui-grid-c > .ui-block-a, .ui-grid-c > .ui-block-b, .ui-grid-c > .ui-block-c, .ui-grid-c > .ui-block-d {
     max-height: 6em !important;
}

.ui-block-a .ui-btn-active, .ui-block-b .ui-btn-active, .ui-block-c .ui-btn-active, .ui-block-d .ui-btn-active{
     border-color: #ffffff !important;
}

#navbarul li img{
     border: 0;
     padding: 0;
     margin: 0;
     max-width: 100%;
}

结果在图上:image

解决方案是什么？ 提前感谢您的回答。

Answer 1

jQM 有一个 CSS 规则，将负右边距应用到导航栏中的最后一个 ui-btn。您可以通过添加此 CSS 来覆盖它:

.ui-navbar li:last-child .ui-btn {
    margin-right: 0;
}

Here is a working DEMO