Javascript 在phonegap中使用css html的选项卡

我正在使用css和html为移动设备制作标签。我当前的代码显示了一些奇怪的行为。我的当前代码显示了如下图所示的选项卡。你可以看到所有的标签都放错了位置，这些标签里面的图标稍微在右边，但我希望它在标签的中心。我可以将图标向左移动，使其显示在photoshop的中心，但如果我在更大屏幕的移动设备上测试此应用程序，则此图标将显示在左侧。我希望他们永远站在中间。那么，请告诉我如何才能像普通移动应用程序一样，让这些标签变得更好

下面是mu html代码

<footer>
    <ul>
        <li class="tabs"><a href="#"></a></li>
        <li class="tabs"><a href="#"></a></li>
        <li class="tabs"><a href="#"></a></li>
    </ul>
</footer>

图为：

更新

这是我的新css

footer {
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
padding: 0;
background: #ccc; }
footer ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center; }
  footer ul li {
    display: block;
    float: left;
    width: 33.33%;
    line-height: 50px;
    text-align: center;
    overflow: hidden; }
    footer ul li a {
      display: block;
      text-decoration: none;
      margin: 1px;
      height: 100%;
      width: 100%;
      background: url(../../../img/tabs.png) center no-repeat;
      /*
      &.home {
        background: url(../../../img/tabs.png) top left no-repeat;
      }
      &.profile {
        background: url(../../../img/tabs.png) top left no-repeat;
      }
      &.cam {
        background: url(../../../img/tabs.png) top left no-repeat;
      }*/ }
      footer ul li a.current {
        margin-top: 5%;
        height: 80%;
        width: 80%;
        background-color: #ccc;
        text-indent: -9999px;
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 50px #666;
        -moz-box-shadow: inset 0 0 50px #666;
        box-shadow: inset 0 0 50px #666; }

这是一本书。我所做的

• text align:center

  到

  ul

  ，因此这是继承的，所有内容都居中

• 行高

  设置为与

  宽度

  相同，因此所有内容都垂直居中
• 列表元素是

  display:block

  ，

  width:33.33%

  和

  float:left

  -我还添加了

  overflow:hidden

• a

  元素具有

  宽度：100%

  和

  边距：1px

---

您现在可以通过添加图像和/或真实文本来使用它。

您好，但当我要添加图像时，它不会显示。图像位于正确的目录中。只有在锚定标记中添加一些文本时，图像才可见。下面是我如何添加图像<代码>背景：url（../../../img/tabs.png）左上角不重复但我不想要文本。我只想要图标。能看到我更新的css吗？这对我仍然不起作用。如果我在链接中添加任何文本，则没有问题，否则它根本不显示背景图像。您可以尝试插入一个空格

”

，或者最好将背景图像扔掉，并使用一个普通的

元素。看见

footer {
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
padding: 0;
background: #ccc; }
footer ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center; }
  footer ul li {
    display: block;
    float: left;
    width: 33.33%;
    line-height: 50px;
    text-align: center;
    overflow: hidden; }
    footer ul li a {
      display: block;
      text-decoration: none;
      margin: 1px;
      height: 100%;
      width: 100%;
      background: url(../../../img/tabs.png) center no-repeat;
      /*
      &.home {
        background: url(../../../img/tabs.png) top left no-repeat;
      }
      &.profile {
        background: url(../../../img/tabs.png) top left no-repeat;
      }
      &.cam {
        background: url(../../../img/tabs.png) top left no-repeat;
      }*/ }
      footer ul li a.current {
        margin-top: 5%;
        height: 80%;
        width: 80%;
        background-color: #ccc;
        text-indent: -9999px;
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 50px #666;
        -moz-box-shadow: inset 0 0 50px #666;
        box-shadow: inset 0 0 50px #666; }