CSS решение
Здравствуйте, Сообщество.
Ищу решение как равномерно разместить 8 ссылок в блоке чтобы каждая
ссылка занимала определённую ширину.
Код следующий:
<div style='width:800px;'>
<a href=''>1</a>
2-7 <a href=''>8</a>
</div>
Можно разместить каждую ссылку в блок и задать нужную ширину блоку,
ещё проще собрать навигацию таблицей, но меня интересует возможно
средствами CSS решить эту задачу или без допонительных элементов (div)
не обойтись ?
Если взять табличный вариант:
<style type="text/css">
table {width:800px;}
td {width:100px; text-align:center;}
</style>
<table>
<tr>
<td><a href=''>1</a></td>
*
<td><a href=''>8</a></td>
</tr>
</table>
Сделай всё списком! Выделил цветом.
<style type="text/css">
div#links {
width:100%;
font-size:.8em;
float:left; /*вмещаем список в div*/
}
div#links li {
width:100px; /*Размер ячеек*/
text-align:center;
float:left; /*Делаем список горизонтальным*/
list-style-type:none; /*удаляем маркеры*/
background-color:#CCC;
padding:0 6px; /*отступ для наглядности*/
border-right:1px solid #069; /*вертикальная черта. чисто чтобы разделить.*/
}
div#links a {
text-decoration:none;
color:990000;
}
</style>
</head>
<body>
<div id="links">
<ul>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка2</a></li>
<li><a href="#">Ссылка8</a></li>
</ul>
</div>
</body>