CSS - li元素集高度

问题描述：

我正在尝试构建导航菜单。这里有一些片断。CSS - li元素集高度

#main-menu .nav-bar { list-style:none; margin-top: 40px;} 
 
    #main-menu .nav-bar li { display:inline; padding:0 10px;} 
 
    
 
     #main-menu .nav-bar li a { 
 
     text-decoration: none; 
 
     padding-left: 50px; 
 
     text-transform: uppercase; 
 
     color: #333; 
 
     display: inline-block; 
 
     text-shadow: 1px 1px 1px #ccc; 
 
    } 
 

 
     .nav-bar .nav-button-home a { background:url("home.png") no-repeat 0px -20px transparent;}

 <nav id="main-menu"> 
 
     <ul class="nav-bar"> 
 
       <li class="nav-button-home"><a href="#">Home</a></li> 
 
     </ul> 
 
    </nav>

什么情况是，李元素不够高显示图片。任何想法如何我可以增加高度李元素，所以会显示整个图片？

感谢

当使用CSS背景时，图像调整到它的容器，而不是相反。或者，如果您希望容器能够调整，请使用。 – Neps 2015-04-01 20:47:58

可能会明智地为您的li指定高度，然后使用background-size：100％; – 2015-04-01 20:51:50

是的，一切正常，谢谢！我发布自己的代码有一个小问题。我正在尝试投票，但我的声望很低。 – Mark 2015-04-02 18:16:41

答

我不认为有办法让你的伸展力向动态背景图像的大小。你可以很容易地完成相反的操作，然后为你的li设置一个确定的高度，然后将你的背景设置为'contain'。这将缩放图像以适合您的li内部，而无需裁剪。

CSS

li { 

height:180px; 
width:240px; 
background-image: url("http://assets.worldwildlife.org/photos/2090/images/hero_small/Sumatran-Tiger-Hero.jpg?1345559303"); 
background-size: contain; 
background-repeat: no-repeat; 
border:1px solid #656565; 
display:inline-block; 
position:relative;

}

span { 
    position:absolute; 
    top:140px; 
    width:100%; 
    text-align:center; 
    background-color:rgba(255, 255, 255, 0.9); 
    padding:10px 0 10px 0; 
    border:1px solid #656565; 
}

我明白了。我怎样才能水平显示它？我也想在图片下方显示一些文字。 – Mark 2015-04-02 09:12:34

@mark只需添加display：inline-block;到你的标签。有几种不同的方法可以将文本添加到图像的底部。我更新了小提琴和我的代码片段，向您展示了如何做到这一点。 – 2015-04-02 12:06:15

尝试更改（跨度）顶部：140px到180px，看看如何适合您的需求。 – 2015-04-02 12:09:22

答

去除背景属性 “透明”

#main-menu .nav-bar { list-style:none; margin-top: 40px;} 
 
    #main-menu .nav-bar li { display:inline; padding:0 10px;} 
 
    
 
     #main-menu .nav-bar li a { 
 
     text-decoration: none; 
 
     padding-left: 50px; 
 
     text-transform: uppercase; 
 
     color: #333; 
 
     display: inline-block; 
 
     text-shadow: 1px 1px 1px #ccc; 
 
    } 
 

 
     .nav-bar .nav-button-home a { background:url("home.png") no-repeat 0px -20px;}

 <nav id="main-menu"> 
 
     <ul class="nav-bar"> 
 
       <li class="nav-button-home"><a href="#">Home</a></li> 
 
     </ul> 
 
    </nav>

答

 <style type="text/css"> 
    body { font-family: sans-serif; } 

    #main-menu .nav-bar { list-style:none; margin-top: 40px; } 
    #main-menu .nav-bar li { display:inline; padding:0px 30px; } 

    #main-menu .nav-bar li a { 
     height:48px; 
     width:48px; 
     display: inline-block; 
     background-size: contain; 
     background-repeat: no-repeat; 
     text-decoration: none; 
     padding-left: 25px; 
     text-transform: uppercase; 
     color: #333; 
     text-shadow: 1px 1px 1px #ccc; 
     position:relative; 

    } 

    .nav-bar .nav-button-home a { background:url("commons/imgs/prism/home.png") 0px -0px; } 
    .nav-bar .nav-button-assets a { background:url("commons/imgs/prism/assets.png") 0px -0px; } 
    .nav-bar .nav-button-alarms a { background:url("commons/imgs/prism/alarms.jpg") 0px -0px; } 
    span { 
     position:absolute; 
     top:50px; 
     left:0px; 
     width:100%; 
     text-align:left; 
     padding:10px 0 10px 0; 
    } 

</style> 

<nav id="main-menu"> 
    <ul class="nav-bar"> 
     <li class="nav-button-home"><a href="#"><span>Home</span></a></li> 
     <li class="nav-button-assets"><a href="#"><span>Assets</span></a></li> 
     <li class="nav-button-alarms"><a href="#"><span>Alarms</span></a></li> 
    </ul> 
</nav>

我唯一的问题是文本中心不完全与图像的中心对齐。

CSS - li元素集高度

相关推荐