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

Тема в разделе "Веб-дизайн", создана пользователем nick1m, 18 окт 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. nick1m

    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>
     
  2. greatilya

    greatilya Создатель

    Регистр.:
    21 май 2009
    Сообщения:
    35
    Симпатии:
    3
    как вариант:
    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; }
     
  3. капрал

    капрал

    Регистр.:
    2 окт 2008
    Сообщения:
    336
    Симпатии:
    45
    попробуй для перент блока прописать CSS text-align:justify; а для тегов <a></a> - display:inline; - должно растянутся
     
  4. whitewolff

    whitewolff Лимонадный Джо :)

    Регистр.:
    29 май 2007
    Сообщения:
    168
    Симпатии:
    33
    как вариант - сделай таблицей, таблицу растяни по всей ширине. ссылкам пропиши но-врап, паддинг слева-справа необходимый, и в начале и конце строки добавь по ячейке с шириной 50%. кнопки будут разной ширины, но с равномерными отступами от текста.
     
  5. nick1m

    nick1m Постоялец

    Регистр.:
    20 фев 2008
    Сообщения:
    119
    Симпатии:
    8
    Спасибо всем!!
    По поводу пхп, там получается распределение по центрам, что не совсем подходит, но я думаю можно посчитать количество символов и проценты считать относительно их, тогда будет все ок.
    По поводу таблицы - пробовал ранее, получается тоже не равномерно, примерно также как в решении от greatilya
    2 капрал, еще не пробовал, попробую отпишусь
    дописал свой пост (см. выше), пробуй © whitewolff
     
  6. Shpek

    Shpek Создатель

    Регистр.:
    21 июл 2009
    Сообщения:
    21
    Симпатии:
    0
    Вот менюшка получается ровно по всей ширине сайта:
    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>
    Ну а дальше уже оформляй по своей фантазии;)
     
  7. nick1m

    nick1m Постоялец

    Регистр.:
    20 фев 2008
    Сообщения:
    119
    Симпатии:
    8
    Попробуй пункты в меню разной длины и посмотриш, что получится, я уже говорил об этом, это здесь в идеале получается - каждый пункт по 5 символов.
     
  8. nittis

    nittis Постоялец

    Регистр.:
    21 апр 2009
    Сообщения:
    68
    Симпатии:
    29
    В примере с таблицей надо явно указать ширину каждого столбца. Примерно вот так для меню из пяти пунктов.

    HTML:
    
    <td width=20%><a href="#">Меню1</a></td>
    
    если число пунктов переменное, тогда можно использовать javascript для вычисления и установки ширины каждого столбца в пикселах
     
  9. nick1m

    nick1m Постоялец

    Регистр.:
    20 фев 2008
    Сообщения:
    119
    Симпатии:
    8
    а вот здесь, если можно, подробнее, что-то не представляю с какой стороны подойти даже :) если можно - с примером
     
  10. nittis

    nittis Постоялец

    Регистр.:
    21 апр 2009
    Сообщения:
    68
    Симпатии:
    29
    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 на стороне сервера.
     
Статус темы:
Закрыта.