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>

直到我为图像添加最大宽度：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;
}

这是一个有效的 DEMO

导航栏中的Li元素不会填充导航栏的可用空间

1 个答案: