Архивы: html

CSS трюки


https://habrahabr.ru/company/mailru/blog/350160/

горизонтальное меню растянутое по ширине

вот собственно и оно.
Вариант 1.
хтмль:

<div id="menu">
<ul>
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 3</a></li>
<li><a href="#">Menu item 2</a></li>
</ul>
<span></span>
</div>

 

цсс

#menu {
text-align: justify;
}
#menu * {
display: inline;
}
#menu span {
display: inline-block;
position: relative;
width: 100%;
height: 0;
}


Вариант 2.

ul {
display: table;
}
li {
display: table-cell;
}