4

在此处输入图像描述

注意到上面的导航栏图像，它已应用在页脚中，固定在页面底部，我需要以下帮助：

  • 格式化每个按钮上方的图标，使其整齐地居中（理想情况下使用 CSS，但因此允许使用 jQuery / jQuery Mobile）
  • 清理我的代码。我很确定在 HTML 和 CSS 中都有更简短的版本来做我正在做的事情，只要它不神秘，我将不胜感激清理下面粘贴的代码的任何帮助。

图标为 24x24，以下是用于 HTML 的代码：

<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<div id="navigation" data-role="controlgroup" data-type="horizontal" class="center">
  <a href="#" data-role="button" data-iconpos="top" id="home" data-icon="custom">Home</a>
    <a href="#" data-role="button" data-iconpos="top" id="powerSource" data-icon="custom">Power Sources</a>
    <a href="#" data-role="button" data-iconpos="top" id="storage" data-icon="custom">Storage</a>
    <a href="#" data-role="button" data-iconpos="top" id="tripAnalysis" data-icon="custom">Trip Analysis</a>
    <a href="#" data-role="button" data-iconpos="top" id="tripManager" data-icon="custom">Trip Manager</a>
    <a href="#" data-role="button" data-iconpos="top" id="warning" data-icon="custom">Warnings & Alarms</a>
    <a href="#" data-role="button" data-iconpos="top" id="powerSys" data-icon="custom">Power Systems</a>
    <a href="#" data-role="button" data-iconpos="top" id="settings" data-icon="custom">Settings</a>
</div>
</div> <!-- / footer -->

以下是我应用的 CSS（从这里和那里收集并编辑了一些内容）：

.ui-icon-custom {
    width:30px !important;
    height:25px !important;
    margin-left:-15px !important;
}
.center {
    text-align: center;
}
#home .ui-icon {
    background-image: url(/images/icons/home.png);
    background-repeat: no-repeat;
}
#powerSource .ui-icon {
    background-image: url(/images/icons/powerSource.png);
    background-repeat: no-repeat;
}
#storage .ui-icon {
    background-image: url(/images/icons/storage.png);
    background-repeat: no-repeat;
}
#tripAnalysis .ui-icon {
    background-image: url(/images/icons/tripAnalysis.png);
    background-repeat: no-repeat;
}
#tripManager .ui-icon {
    background-image: url(/images/icons/tripManager.png);
    background-repeat: no-repeat;
}
#warning .ui-icon {
    background-image: url(/images/icons/warning.png);
    background-repeat: no-repeat;
}
#powerSys .ui-icon {
    background-image: url(/images/icons/powerSys.png);
    background-repeat: no-repeat;
}
#settings .ui-icon {
    background-image: url(/images/icons/settings.png);
    background-repeat: no-repeat;
}
4

0 回答 0