Мне нужно создать меню, которое на мобильных устройствах будет расширяться до полной ширины. Что-то похожее на этот каркас.
Мой код:
HTML
<div id="shortcuts">
<ul>
<li><a href="#">Categories</a></li>
<li><a href="#archives">Archives</a></li>
</ul>
</div>
CSS
#header {
width: 100%;
height: 180px;
background-color: #666;
color: #fff;
}
#shortcuts { position: absolute; z-index: 20; top: 0; left: 0; right: 0; }
#shortcuts ul {
display: table;
width:100%;
height: 180px; /* for testing only */
}
#shortcuts ul li {
list-style: none;
display: table;
height: 60px;
width:100%;
display: block;
vertical-align: middle;
background-color: red; /* for testing only */
border: blue 3px solid; /* for testing only */
}
#shortcuts ul li a {
width: 100%;
height: 60px;
text-decoration: none;
display: table-cell;
vertical-align: middle;
border: 2px dashed green; /* for testing only */
}
Это мой результат до сих пор (цвета, используемые только для тестирования)
Если я изменил #shortcuts ul li a
для display: block;
, Я могу получить желаемую ширину. Но тогда текст не будет центрировать по вертикали.
Не дубликат привязки CSS-позиционирования внутри ли вертикально выровнен, потому что это лишь частичная часть вертикального выравнивания текста. Не отвечает, как сделать ссылку расширяющейся на 100% шириной.
Вам нужно использовать " display: block;
" и " line-height:60px;
" для "#shortcuts ul li a {"
Обновленный код:
#shortcuts ul li a {
width: 100%;
height: 60px;
text-decoration: none;
display: block;
line-height:60px;
vertical-align: middle;
border: 2px dashed green; /* for testing only */
}
Пожалуйста, обратитесь к скрипке: - http://jsfiddle.net/aasthatuteja/6WEW6/