Как увеличить высоту li внутри вертикально центрированного div?

У меня есть ul, который вертикально центрирован. Я хотел бы увеличить высоту li до такой же высоты div.wrapper, чтобы при наведении на всю высоту li был покрыт цвет фона. В настоящее время он охватывает только ширину li.Как увеличить высоту li внутри вертикально центрированного div?

.wrapper { 
 
    display:table; 
 
    height:8em; 
 
    background-color:#004857; 
 
    width:100%; 
 
} 
 
.inner { 
 
    display:table-cell; 
 
    vertical-align:middle; 
 
} 
 
ul.list { 
 
    margin:0; 
 
    padding:0; 
 
    list-style:none; 
 
    width:50%; 
 
    margin:auto; 
 
    height:100%; 
 
} 
 
ul.list li { 
 
    float:left; 
 
    width:5em; 
 
    text-align:center; 
 
} 
 
ul.list li a { 
 
    color: #fff; 
 
    display:block; 
 
} 
 
ul.list li a:hover { 
 
    background-color: #ff5500; 
 
}

<div class="wrapper"> 
 
    <div class="inner"> 
 
     <ul class="list"> 
 
      <li><a href="#">One</a> 
 
      </li> 
 
      <li><a href="#">Two</a> 
 
      </li> 
 
      <li><a href="#">Three</a> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</div>

источник

2014-11-25 user1448031

Попробуйте это:

Демо: http://jsfiddle.net/lotusgodkk/GCu2D/462/

CSS:

.wrapper { 
    display:table; 
    height:8em; 
    background-color:#004857; 
    width:100%; 
} 
.inner { 
    display:table-cell; 
    vertical-align:middle; 
} 
ul.list { 
    margin:0; 
    padding:0; 
    list-style:none; 
    width:50%; 
    margin:auto; 
    height:100%; 
} 
ul.list li { 
    float:left; 
    width:5em; 
    height:inherit; //added 
    text-align:center; 
} 
ul.list li a { 
    color: #fff; 
    display:block; 
    padding:4em 0;//added 
} 
ul.list li a:hover { 
    background-color: #ff5500; 
}

источник

2014-11-25 06:57:46

Хорошее решение. Но вы не добавили 'display: block;' в 'ul.list li a'. Он был там раньше. ;) Еще одно возможное решение - добавить '' line-height: 8em; до ul.list li'' и 'height: 100%; to ul.list li a 'like [ЗДЕСЬ] (http://jsfiddle.net/GCu2D/463/) –

Спасибо за указание. Да, это еще один способ сделать то же самое. –

@DerVampyr: попробовали ваше решение и добавили его в качестве ответа –

В настоящее время вы используете только вариант с плавающей точкой (: парения) на якорь. Якорь - это элемент, который меняет цвет фона, а не div.

Вы можете попытаться расширить размер анкера (a) в css. Этот якорь по умолчанию по умолчанию.

источник

2014-11-25 06:55:28 Leon

-2

Добавить height: 100%; в оба ul.list li и ul.list li a.

источник

2014-11-25 06:56:15 Loedolff

Недостаточно. Вам нужно что-то, что подталкивает высоту тега, например, прокладку, например. –

попробовать этот

DEMO FIDDLE

ul.list li { 
    float:left; 
    width:5em; 
    line-height: 8em; //added 
    text-align:center; 
} 
ul.list li a { 
    color: #fff; 
    display:block; 
    height:100%; //added 
}

т ried @Der Vampyr's комментарий

Другим возможным решением является добавление линии-высоты: 8em; to ul.list li и высота: 100%;

источник

2014-11-25 07:14:30

Как увеличить высоту li внутри вертикально центрированного div?

ответ

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