можно ли распределить несколько слов в строке по всей ее ширине

Статус
В этой теме нельзя размещать новые ответы.
N

nick1m

Постоялец
Регистрация
20 Фев 2008
Сообщения
119
Реакции
8
Столкнулся с такой проблемкой, вроде бы элементарно, но не могу понять как сделать:
Необходимо элементарное однострочное горизонтальное меню, но как равномерно распределить элементы по всей ширине сайта, понять не могу. Есть ли вообще решение, кроме как вручную?
HTML: 
<a href="#">меню 1</a> <a href="#">меню 2</a> <a href="#">меню 3</a> <a href="#">меню 4</a> <a href="#">меню 5</a>
 
как вариант:
HTML: 
a { width:20%; float:left; display:block; }
можно средствами РНР записать width:
PHP: 
<?php
$menu=array();
$menu[]='меню 1';
$menu[]='меню 2';
$menu[]='меню 3';
$menu[]='меню 4';
$menu[]='меню 5';
?>
a { width:<?php if(count($menu)) echo floor(100/count($menu)); ?>%; float:left; display:block; }
 
попробуй для перент блока прописать CSS text-align:justify; а для тегов <a></a> - display:inline; - должно растянутся
 
как вариант - сделай таблицей, таблицу растяни по всей ширине. ссылкам пропиши но-врап, паддинг слева-справа необходимый, и в начале и конце строки добавь по ячейке с шириной 50%. кнопки будут разной ширины, но с равномерными отступами от текста.
 
Спасибо всем!!
По поводу пхп, там получается распределение по центрам, что не совсем подходит, но я думаю можно посчитать количество символов и проценты считать относительно их, тогда будет все ок.
По поводу таблицы - пробовал ранее, получается тоже не равномерно, примерно также как в решении от greatilya
2 капрал, еще не пробовал, попробую отпишусь
дописал свой пост (см. выше), пробуй © whitewolff​
 
Вот менюшка получается ровно по всей ширине сайта:
HTML: 
<body>
<table width="100%" border="0">
  <tr align="center">
    <td><a href="#">Меню1</a></td>
    <td><a href="#">Меню2</a></td>
    <td><a href="#">Меню3</a></td>
    <td><a href="#">Меню4</a></td>
    <td><a href="#">Меню5</a></td>
  </tr>
</table>
</body>

Ну а дальше уже оформляй по своей фантазии;)
 
Shpek написал(а):
Вот менюшка получается ровно по всей ширине сайта:
HTML: 
<body>
<table width="100%" border="0">
  <tr align="center">
    <td><a href="#">Меню1</a></td>
    <td><a href="#">Меню2</a></td>
    <td><a href="#">Меню3</a></td>
    <td><a href="#">Меню4</a></td>
    <td><a href="#">Меню5</a></td>
  </tr>
</table>
</body>
Ну а дальше уже оформляй по своей фантазии;)
Нажмите для раскрытия...

Попробуй пункты в меню разной длины и посмотриш, что получится, я уже говорил об этом, это здесь в идеале получается - каждый пункт по 5 символов.
 
В примере с таблицей надо явно указать ширину каждого столбца. Примерно вот так для меню из пяти пунктов.

HTML: 
<td width=20%><a href="#">Меню1</a></td>

если число пунктов переменное, тогда можно использовать javascript для вычисления и установки ширины каждого столбца в пикселах
 
nittis написал(а):
если число пунктов переменное, тогда можно использовать javascript для вычисления и установки ширины каждого столбца в пикселах
Нажмите для раскрытия...

а вот здесь, если можно, подробнее, что-то не представляю с какой стороны подойти даже :) если можно - с примером
 
HTML: 
  <p>ширина в пикселах
  <table id = "tbl" width="100%" border="1">
    <tr align="center">
      <td><a href="#">Меню1</a></td>
      <td><a href="#">Меню22</a></td>
      <td><a href="#">Меню333</a></td>
      <td><a href="#">Меню4444</a></td>
      <td><a href="#">Меню55555</a></td>
      <td><a href="#">Меню666666</a></td>
    </tr>
  </table>
  
  <p>ширина в процентах
  <table id = "tbl2" width="100%" border="1">
    <tr align="center">
      <td><a href="#">Меню1</a></td>
      <td><a href="#">Меню22</a></td>
      <td><a href="#">Меню333</a></td>
      <td><a href="#">Меню4444</a></td>
      <td><a href="#">Меню55555</a></td>
      <td><a href="#">Меню666666</a></td>
    </tr>
  </table>  
  
  <script>
    //ширина в пикселах
    tbl = document.getElementById('tbl');
    tblWidth = tbl.offsetWidth;
    row = tbl.rows[0];
    colWidth = tblWidth/row.cells.length;
    for(i = 0; i < row.cells.length; i++)
    {
      row.cells[i].style.width = colWidth + 'px';
    }

    //ширина в процентах
    tbl = document.getElementById('tbl2');
    row = tbl.rows[0];
    colWidth = 100/row.cells.length;
    for(i = 0; i < row.cells.length; i++)
    {
      row.cells[i].style.width = colWidth + '%';
    }
  </script>

с процентами вроде лучше при ресайзе окна работает. можно этот вариант аналогичным образом реализовать и на php на стороне сервера.
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху