モバイルデバイス用のcssとhtmlを使用してタブを作成しています。私の現在のコードは、いくつかの奇妙な動作を示しています。私の現在のコードは、下の画像に示されているタブを示しています。タブがすべて間違って配置されており、これらのタブ内のアイコンがわずかに右側にあることがわかりますが、これをタブの中央に配置したいと考えています。そのアイコンを左に移動してフォトショップの中央に表示することができますが、このアプリを大画面のモバイル デバイスでテストすると、このアイコンが左側に表示されます。常に中心にいてほしい。通常のモバイル アプリのように、これをより良いタブにする方法を教えてください。
ここに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; }