我正在使用 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: #535353;
}
footer ul {
list-style-type: none;
margin: 0;
padding: 0;
}
footer ul li {
display: inline-block;
width: 31%;
height: 50px;
}
footer ul li a {
display: block;
text-decoration: none;
height: 100%;
width: 100%;
background: #fff;
background: url(../../../img/tabs.png) top left no-repeat;
}
这是图像：
更新
这是我的新 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; }