1

我有一个客户给了我一个 psd 切片并放入引导程序。在 pds 中,它们有导航栏的图像,而且它们的形状很奇怪,所以我用它们制作了一个精灵导航栏。用 css 重新创建它是不可能的。

我的问题是他们至少没有响应。有没有办法让它们如此,而不必每隔几个像素使用媒体查询来调整它们的大小?

我的 html

  <div class="col-md-8">
    <nav>
      <ul>
        <li><a class="about" href="#">About</a></li>
        <li><a class="products" href="#">Products</a></li>
        <li><a class="technology" href="#">Technology</a></li>
      </ul>
    </nav>
  </div><!--.col-md-8-->

和我的 CSS

nav ul li{
  float: left;
  list-style-type:none ;
  text-indent:-9999em;
}

nav ul li a{
    background:url(../img/nav.png) no-repeat;
  display: block;
}

.about{
  background-position:0px 0px;  
  width:25em;  
  height:5em;  
}

.products{
  background-position:-25em 0;  
  width:9em;  
  height:5em;  
}

.technology{
  background-position:-34em 0;  
  width:13em;  
  height:5em;  
}

我已经尝试向它们添加min-heightmin-width,但它似乎没有任何效果。

4

0 回答 0