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>

Что происходит, что литий элемент не достаточно высок, чтобы показать картину. Любая идея, как я могу увеличить элемент li высоты, покажет всю картину?

Благодаря

источник

2015-04-01 Mark

При использовании фона css изображение настраивается на его контейнер, а не наоборот. В качестве альтернативы используйте , если вы хотите, чтобы контейнер мог настраиваться. – Neps

может быть разумным указать высоту для вашего ли, а затем использовать размер фона: 100%; –

Да, все сработало, спасибо! Я отправляю свой собственный код с небольшой проблемой. Я пытаюсь проголосовать, но моя репутация низкая. – Mark

Я не думаю, что есть способ, чтобы сделать ваш Li растянуть динамически размер фонового изображения. Однако вы можете легко сделать обратное, установить определенную высоту для своего ли, а затем установить фон «содержать». Это масштабирует изображение вниз, чтобы поместиться внутри вашего li без обрезки.

Updated jsFiddle

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; 
}

источник

2015-04-01 20:59:31

Я вижу. Как я могу показать это по горизонтали? Я также хочу показать текст под картинками. – Mark

@mark просто добавить отображение: встроенный блок; к вашим ликам. Есть несколько разных способов добавить текст в нижнюю часть ваших изображений. Я обновил скрипт и мои фрагменты кода, чтобы показать вам, как я это сделаю. –

попробуйте изменить верхнюю часть: от 140 до 180 пикселей, посмотрите, как это соответствует вашим потребностям. –

Удалить фон недвижимости "прозрачный"

#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>

источник

2015-04-02 13:23:31

 <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>

Единственная проблема, у меня есть этот текст центр не полностью совпадает с центром изображения.

источник

2015-04-02 18:15:53 Mark

CSS-li набор элементов высота

ответ

Смежные вопросы