底部

底部

关注
发信
html - X-UA兼容元标记应该在字符集标记之前还是之后
java - 如何从Java中的URL获取xml响应并将其存储在MONGODB中
ios - 如何将照片(以及标签和按钮)放入“滚动 View ”，每次在Storyboard中添加新照片时都会使其变长
javascript - 使用document.getElementsByTagName找不到动态添加的元素(IE6)
f# - F#缺少类型约束
java - 从Java中的数据库中检索值
java - 如何使用Lambda表达式在其字段之一上对类对象列表进行排序？
javascript - 使用onchange =“readURL(this);”显示图像的名称
r - 是否可以跳过“+”运算符中的NA值？
php - 根据通配符子域获取动态内容
ios - 带相机弹出窗口的iOS应用
wordpress - 如何创建相同尺寸的缩略图？
javascript - 速度过高时碰撞检测失败
html - 将标签文本放在输入字段上
javascript - 使用jQuery删除数组

html - CSS Sprites-如何对齐所有Sprite按钮的底部

扫码查看

我有9个按钮沿底部导航我的网络应用程序（想想iOS导航栏-但这不是一个移动应用程序）。
所有按钮都是3个状态的精灵图像。
如何将所有图像（即按钮）与导航栏（或div）底部对齐？基本上，每个图标的大小略有不同，在PNG中，每个图标下面都有文本。
我希望所有文本都对齐，因此所有按钮都必须底部对齐。
我该怎么做？CSS解决方案？HTML解决方案？
谢谢你的帮助，
丁
请参阅下面的标记：

<html>
<head>

<link href='http://fonts.googleapis.com/css?family=Lobster&amp;v2' rel='stylesheet'type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Lobster+Two&amp;v2'  rel='stylesheet' type='text/css' />
<style type="text/css">

body {
    background: #000;
     color: #ffffff;
     font-family: 'Lobster', cursive;
     font-family: 'Lobster Two', cursive;
    background:#ffffff url('../Background1.png');
    }

 /*Get Boxeeee with it*/
 .box
 {
 width: 1700px;
 height: 100px;
 margin: 0px;
 padding: 0px;

 }

 .box a
 {

 float: left;
 margin-right:20px;
 }



 /*Logo CSS Sprites CSS ONLY*/

 .sprite-Bunches-small-normalcopy {
    background-image: url('../Images/Sprites/giantsprite.png');
    background-position: 0 -94px; width: 139px; height: 44px;
    display: block;
    text-indent: -9999px;
     vertical-align: bottom;
    }

 .sprite-Bunches-small-normalcopy:hover {
    background-image: url('../Images/Sprites/giantsprite.png');
    background-position: 0 0; width: 139px; height: 44px;
    display: block;
    text-indent: -9999px;
     vertical-align: bottom;
    }

 .sprite-Bunches-small-normalcopy:active {
    background-image: url('../Images/Sprites/giantsprite.png');
    background-position: 0 -188px; width: 139px; height: 44px;
    display: block;
    text-indent: -9999px;
     vertical-align: bottom;
    }


 /*Start Bunches Button CSS ONLY*/

 .sprite-start-regular {
    background-image: url('../Images/Sprites/giantsprite.png');
    background-position: -189px -737px; width: 130px; height: 43px;
    display: block;
    text-indent: -9999px;
     vertical-align: bottom;
    }

 .sprite-start-regular:hover {
    background-image: url('../Images/Sprites/giantsprite.png');
    background-position: 0 -282px; width: 130px; height: 43px;
    display: block;
    text-indent: -9999px;
     vertical-align: bottom;
    }

 .sprite-start-regular:active {
    background-image: url('../Images/Sprites/giantsprite.png');
    background-position: -189px -644px; width: 130px; height: 43px;
    display: block;
    text-indent: -9999px;
     vertical-align: bottom;
    }

 /*Press to Talk Button CSS ONLY*/

 .sprite-talk-normal {
    background-image: url('../Images/Sprites/giantsprite.png');
    background-position: -189px -923px; width: 130px; height: 43px;
    display: block;
    text-indent: -9999px;
     vertical-align: bottom;
    }

 .sprite-talk-normal:hover {
    background-image: url('../Images/Sprites/giantsprite.png');
    background-position: -189px -830px; width: 130px; height: 43px;
    display: block;
    text-indent: -9999px;
     vertical-align: bottom;
    }

 .sprite-talk-normal:active {
    background-image: url('../Images/Sprites/giantsprite.png');
    background-position: -189px -1016px; width: 130px; height: 43px;
    display: block;
    text-indent: -9999px;
     vertical-align: bottom;
    }


 /*Camera Pic Button CSS ONLY*/

 .sprite-camera-normal {
    background-image: url('../Images/Sprites/giantsprite.png');
    background-position: 0 -530px; width: 123px; height: 105px;
    display: block;
    text-indent: -9999px;
     vertical-align: bottom;
    vertical-align: bottom;
    }

 .sprite-camera-normal:hover {
    background-image: url('../Images/Sprites/giantsprite.png');
    background-position: 0 -375px; width: 123px; height: 105px;
    display: block;
    text-indent: -9999px;
     vertical-align: bottom;
    }

 .sprite-camera-normal:active {
    background-image: url('../Images/Sprites/giantsprite.png');
    background-position: 0 -685px; width: 123px; height: 105px;
    display: block;
    text-indent: -9999px;
     vertical-align: bottom;
    }

 /*Chat Button w/JS (+1 to Hover Y, and -1 to Active(s)), +1 to Active Height*/

 .sprite-chat-normal{
    background-image: url('../Images/Sprites/giantsprite.png');
    background-position: 0 -992px; width: 102px; height: 102px;
    display: block;
    text-indent: -9999px;
     vertical-align: bottom;
    }

 .sprite-chat-normal:hover {
    background-image: url('../Images/Sprites/giantsprite.png');
    background-position: 0 -841px; width: 102px; height: 102px;
    display: block;
    text-indent: -9999px;
     vertical-align: bottom;
    }

 .sprite-chat-normal:active, .chat-active {
    background-image: url('../Images/Sprites/giantsprite.png');
    background-position: 0 -1143px; width: 102px; height: 103px;
    display: block;
    text-indent: -9999px;
     vertical-align: bottom;
    }

 .sprite-chat-normal1:active {
    background-image: url('../Images/Sprites/giantsprite.png');
    background-position: 0 -1144px; width: 102px; height: 102px;
    display: block;
    text-indent: -9999px;
     vertical-align: bottom;
    }


 /*Invite Button w/JS (+1 to Hover Y, and -1 to Active(s)), +1 to Active Height*/

 .sprite-invite-normal{
    background-image: url('../Images/Sprites/giantsprite.png');
    background-position: 0 -1439px; width: 105px; height: 93px;
    display: block;
    text-indent: -9999px;
     vertical-align: bottom;
    }

 .sprite-invite-normal:hover {
    background-image: url('../Images/Sprites/giantsprite.png');
    background-position: 0 -1297px; width: 105px; height: 93px;
    display: block;
    text-indent: -9999px;
     vertical-align: bottom;
    }

 .sprite-invite-normal:active, .invite-active{
    background-image: url('../Images/Sprites/giantsprite.png');
    background-position: 0 -1581px; width: 105px; height: 94px;
    display: block;
    text-indent: -9999px;
     vertical-align: bottom;
    }

 .sprite-invite-normal1:active {
    background-image: url('../Images/Sprites/giantsprite.png');
    background-position: 0 -1582px; width: 105px; height: 93px;
    display: block;
    text-indent: -9999px;
     vertical-align: bottom;
    }



 /*MIC Button w/JS (abs+1 to Hover Y, and abs-1 to Active(s)), +1 to Active Height*/

 .sprite-mic-normal {
    background-image: url('../Images/Sprites/giantsprite.png');
    background-position: 0 -1886px; width: 74px; height: 111px;
    display: block;
    text-indent: -9999px;
     vertical-align: bottom;
    }

 .sprite-mic-normal:hover {
    background-image: url('../Images/Sprites/giantsprite.png');
    background-position: 0 -1726px; width: 74px; height: 111px;
    display: block;
    text-indent: -9999px;
     vertical-align: bottom;
    }

 .sprite-mic-normal:active, .mic-active {
    background-image: url('../Images/Sprites/giantsprite.png');
    background-position: -189px 1; width: 74px; height: 112px;
    display: block;
    text-indent: -9999px;
     vertical-align: bottom;
    }

        .sprite-mic-normal1:active{
            background-image: url('../Images/Sprites/giantsprite.png');
            background-position: -189px 0; width: 74px; height: 111px;
            display: block;
            text-indent: -9999px;
     vertical-align: bottom;
            }


 /*Music Button w/JS (abs+1 to Hover Y, and abs-1 to Active(s)), +1 to Active Height*/

 .sprite-music-normal {
    background-image: url('../Images/Sprites/giantsprite.png');
    background-position: -189px -322px; width: 99px; height: 111px;
    display: block;
    text-indent: -9999px;
     vertical-align: bottom;
    }

 .sprite-music-normal:hover {
    background-image: url('../Images/Sprites/giantsprite.png');
    background-position: -189px -162px; width: 99px; height: 111px;
    display: block;
    text-indent: -9999px;
     vertical-align: bottom;
    }

 .sprite-music-normal:active, .music-active {
    background-image: url('../Images/Sprites/giantsprite.png');
    background-position: -189px -482px; width: 99px; height: 112px;
    display: block;
    text-indent: -9999px;
     vertical-align: bottom;
    }

    .sprite-music-normal1:active{
        background-image: url('../Images/Sprites/giantsprite.png');
        background-position: -189px -483px; width: 99px; height: 111px;
        display: block;
        text-indent: -9999px;
     vertical-align: bottom;
        }


 /*Movie Button w/JS (abs+1 to Hover Y, and abs-1 to Active(s)), +1 to Active Height*/

 .sprite-video-normal {
    background-image: url('../Images/Sprites/giantsprite.png');
    background-position: -189px -1252px; width: 103px; height: 93px;
    display: block;
    text-indent: -9999px;
     vertical-align: bottom;
    }

 .sprite-video-normal:hover {
    background-image: url('../Images/Sprites/giantsprite.png');
    background-position: -189px -1110px; width: 103px; height: 93px;
    display: block;
    text-indent: -9999px;
     vertical-align: bottom;
    }

 .sprite-video-normal:active, .video-active{
    background-image: url('../Images/Sprites/giantsprite.png');
    background-position: -189px -1394px; width: 103px; height: 94px;
    display: block;
    text-indent: -9999px;
     vertical-align: bottom;
    }

    .sprite-video-normal1:active{
        background-image: url('../Images/Sprites/giantsprite.png');
        background-position: -189px -1395px; width: 103px; height: 93px;
        display: block;
        text-indent: -9999px;
     vertical-align: bottom;
        }

 /*Webcam Button w/JS (abs+1 to Hover Y, and abs-1 to Active(s)), +1 to Active Height*/

 .sprite-webcam-normal {
    background-image: url('../Images/Sprites/giantsprite.png');
    background-position: -779px 0; width: 70px; height: 86px;
    display: block;
    text-indent: -9999px;
     vertical-align: bottom;
    }

 .sprite-webcam-normal:hover {
    background-image: url('../Images/Sprites/giantsprite.png');
    background-position: -189px -1929px; width: 70px; height: 86px;
    display: block;
    text-indent: -9999px;
     vertical-align: bottom;
    }

 .sprite-webcam-normal:active, .webcam-active {
    background-image: url('../Images/Sprites/giantsprite.png');
    background-position: -779px -136px; width: 81px; height: 89px;
    display: block;
    text-indent: -9999px;
     vertical-align: bottom;
    }

    .sprite-webcam-normal1:active{
        background-image: url('../Images/Sprites/giantsprite.png');
        background-position: -779px -136px; width: 81px; height: 89px;
        display: block;
        text-indent: -9999px;
     vertical-align: bottom;
        }

 /*Who's Here Button w/JS (abs+1 to Hover Y, and abs-1 to Active(s)), +1 to Active Height*/

 .sprite-who-normal {
    background-image: url('../Images/Sprites/giantsprite.png');
    background-position: -779px -424px; width: 105px; height: 99px;
    display: block;
    text-indent: -9999px;
     vertical-align: bottom;
    }

 .sprite-who-normal:hover {
    background-image: url('../Images/Sprites/giantsprite.png');
    background-position: -779px -276px; width: 105px; height: 99px;
    display: block;
    text-indent: -9999px;
     vertical-align: bottom;
    }

 .sprite-who-normal:active, .who-active {
    background-image: url('../Images/Sprites/giantsprite.png');
    background-position: -779px -572px; width: 105px; height: 100px;
    display: block;
    text-indent: -9999px;
     vertical-align: bottom;
    }

    .sprite-who-normal1:active {
        background-image: url('../Images/Sprites/giantsprite.png');
        background-position: -779px -573px; width: 105px; height: 99px;
        display: block;
        text-indent: -9999px;
        vertical-align: bottom;
        }



 .sprite-waiting-video {
    background-image: url('../Images/Sprites/giantsprite.png');
    background-position: -189px -1538px; width: 540px; height: 340px;
    display: block;
    text-indent: -9999px;
     vertical-align: bottom;
    }
</style>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

 $(document).ready(function(){
    $('.sprite-chat-normal').click(function() {
         $(this).toggleClass('sprite-chat-normal').toggleClass('sprite-chat-normal1').toggleClass('chat-active');
     });
  });


 /* Invite Button Toggle */

 $(document).ready(function(){
    $('.sprite-invite-normal').click(function() {
         $(this).toggleClass('sprite-invite-normal').toggleClass('sprite-invite-normal1').toggleClass('invite-active');
     });
  });



 /* Mic Button Toggle */

 $(document).ready(function(){
    $('.sprite-mic-normal').click(function() {
         $(this).toggleClass('sprite-mic-normal').toggleClass('sprite-mic-normal1').toggleClass('mic-active');
     });
  });



 /* Music Button Toggle */

 $(document).ready(function(){
    $('.sprite-music-normal').click(function() {
         $(this).toggleClass('sprite-music-normal').toggleClass('sprite-music-normal1').toggleClass('music-active');
     });
  });

 /* Movie Button Toggle */

 $(document).ready(function(){
    $('.sprite-video-normal').click(function() {
         $(this).toggleClass('sprite-video-normal').toggleClass('sprite-video-normal1').toggleClass('video-active');
     });
  });



 /* Webcam Button Toggle */

 $(document).ready(function(){
    $('.sprite-webcam-normal').click(function() {
         $(this).toggleClass('sprite-webcam-normal').toggleClass('sprite-webcam-normal1').toggleClass('webcam-active');
     });
  });


 /* Who's Here Button Toggle */

 $(document).ready(function(){
    $('.sprite-who-normal').click(function() {
         $(this).toggleClass('sprite-who-normal').toggleClass('sprite-who-normal1').toggleClass('who-active');
     });
  });


 </head>
 <body>
 <div class="box">
 <!--<a class="sprite-Bunches-small-normalcopy" href="#"></a>
 <a class="sprite-start-regular" href="#"></a>
 <a class="sprite-talk-normal" href="#"></a>-->
 <a class="sprite-camera-normal" href="#"></a>
 <a class="sprite-chat-normal" href="#"></a>
 <a class="sprite-invite-normal" href="#"></a>
 <div style="float:right;">
 <a class="sprite-mic-normal" href="#"></a>
 <a class="sprite-music-normal" href="#"></a>
 <a class="sprite-video-normal" href="#"></a>
 <a class="sprite-webcam-normal" href="#"></a>
 <a class="sprite-who-normal" href="#"></a>
 </div>
 </div>
 </body>
 </html>

最佳答案

这看起来更像是一个photoshop切碎问题。假设标记的结构如下所示，我将采用以下方法：

<nav>
     <ul>
          <li class="icon-a">
               <a>
                    <span class="icon"></span>
                    Text
               </a>
          </li>

          <li class="icon-b">
               <a>
                    <span class="icon"></span>
                    Text
               </a>
          </li>
     </ul>
</nav>

找到最高图标的高度并将其设置为<li>的高度。然后找到最宽图标的宽度，并将其设置为<li>的宽度。
你必须非常小心地在你的精灵文件中布局图标，并根据我在上面提到的最大宽度和高度均匀地间隔图标（我将使用photoshop标尺和指南来创建一个网格，使你的生活更容易）。每个图标状态应为一行。对齐底部图标的关键是如何在photoshop中排列图标。
我会这样做假设你最高的图标是40像素，最宽的图标是30像素。我将高度设置为60px，这样在底部有空间让文本进入图标下面。
nav li {
   width: 30px;
   height: 60px;
   display: block;
   float: left;
}

nav li a {
   width: 30px;
   height: 60px;
   line-height: 15px;
   display: block;
   text-align: center
}

nav li a span {
   width: 30px;
   height: 40px;
   padding-bottom: 5px;
   display: block;
   background: url(icons.png) no-repeat
}

nav li.icon-a span {background-position: 0 0}
nav li.icon-a span:hover {background-position: 0 -40px}
nav li.icon-a span:active {background-position: 0 -80px}

nav li.icon-b span {background-position: -30px 0}
nav li.icon-b span:hover {background-position: -30px -40px}
nav li.icon-b span:active {background-position: -30px -80px}

09-25 16:50
查看更多
Powered by LMLPHP ©2025 底部 0.033359