Как выровнять блоки на всю ширину
 

хочу сделать так

<nav>
    <a>1</a>
    <a>2</a>
    <a>3</a>
</nav>

<style type="text/css">
    nav{
        display: table-row;
    }
    a{
        display: table-cell;
    }
</style>

чтобы было так

почему все так не логично, я хочу одно, делаю все ЛОГИЧНОЕ для этого а получаю не ожидаемое....

хочу чтобы <a> вели себя внутри <nav> как <td> ведут себя внутри <tr> , то есть делили всю ширину nav между собой

все ДОЛЖНО работать, но не работает.

Все логично. Твоя хрень ведет себя также как и таблица:

<nav>
    <a>1</a>
    <a>2</a>
    <a>3</a>
</nav>

<table>
<tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
</tr>
</table>

<style type="text/css">
    nav{
        display: table-row;
    }
    a{
        display: table-cell;
        border: 2px solid green;
    }
    table{
        border-spacing: 0;
    }
    td{
        border: 2px solid green;
    }
</style>

забыл уточнить про width: 100%

<nav>
    <a>1</a>
    <a>2</a>
    <a>3</a>
</nav>

<table>
<tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
</tr>
</table>

<style type="text/css">
    nav{
        display: table-row; 
        width: 100%;
    }
    a{
        display: table-cell;
        border: 2px solid green;
    }
    table{
        border-spacing: 0;
        width: 100%;
    }
    td{
        border: 2px solid green;
    }
</style>

при том я не хочу портить семантику добавляя что то вроде контейнера ДЛЯ СТРОКИ который имел бы дисплей table

короче как я понял это общеизвестная прблема и решена она с помощью "грид"

В новые фишки пока не вникал, но вроде да, проблему вроде решили. Меня самого бесят недостатки старых версий css, ибо я сам верстальщик.
Незнаю насколько это будет корректно работать, но можно для nav задать display: table и вроде работает (в хроме по крайней мере и на небольшом числе элементов)

<nav>
    <a>1</a>
    <a>2</a>
    <a>3</a>
</nav>
 
<table>
<tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
</tr>
</table>
 
<style type="text/css">
    nav{
        display: table;
        width: 100%;
    }
    a{
        display: table-cell;
        border: 2px solid green;
    }
    table{
        border-spacing: 0;
        width: 100%;
    }
    td{
        border: 2px solid green;
    }
</style>

danik.js,
вау, спасибо огромное, почему то даже не додумался... предполагал что надо в row ячейки класть

а как сделать их равными независимо от контента (при неизвестном количестве)?

<nav>
    <a>Суши</a>
    <a>Роллы</a>
    <a>Ассорти</a>
</nav>
 
<table>
<tr>
    <td>Суши</td>
    <td>Роллы</td>
    <td>Ассорти</td>
</tr>
</table>
 
<style type="text/css">
    nav{
        display: table;
        width: 100%;
    }
    a{
        display: table-cell;
        border: 2px solid green;
    }
    table{
        border-spacing: 0;
        width: 100%;
    }
    td{
        border: 2px solid green;
    }
</style>

width: 33%;

Опять же незнаю насчет кроссбраузерности, в хроме вроде все поровну:

<nav>
    <a>Суши</a>
    <a>Роллы</a>
    <a>Ассорти</a>
</nav>
  
<table>
<tr>
    <td>Суши</td>
    <td>Роллы</td>
    <td>Ассорти</td>
</tr>
</table>
  
<style type="text/css">
    nav{
        display: table;
        width: 100%;
        table-layout: fixed;
    }
    a{
        display: table-cell;
        border: 2px solid green;
    }
    table{
        border-spacing: 0;
        width: 100%;
    }
    td{
        border: 2px solid green;
    }
</style>

В случае чего можно еще попробовать добавить для ячейки width: 0 или наоборот, большое какое-нибудь число, или даже 100%, хотя фиг знает.

danik.js,
слушай, да ты верстальщик от бога.... спасибо

бога нет

то что его придумали не является доказательством его отсутствия тимми)

а кстати ты верстать умеешь норм? спросить кое чо хотел по семантке

попробуй. мб вспомню чё

корчое я хочу на срать в семантику и сделать такое

хочу сделать что то вроде табов при чом чтобы писались они так

<div class="content">
    <div>
        <article class="tab1"></article>
        <article class="tab2"></article>
        <article class="tab3"></article>
    </div>

    <nav>
        <a href="tab1">1</a>
        <a href="tab2">2</a>
        <a href="tab3">3</a>
    </nav>
</div>

а рисовались так



чтобы внизу это типа нав а вверху эти типа содержимое меню

табы? не не слышали

p.s.: не понял в чём проблема

СДЕЛАЙ

<nav>
        <a href="tab1">РОЛЛЫ</a>
        <a href="tab2">СУШИ</a>
        <a href="tab3">АССОРТИ</a>
</nav>

как на картинке (число пунктов неизвестно и может меняться)

а чем таблица неугодила? :)

Ну наверное семантика и все такое..

эти слова заставили меня задуматься " а на самом деле в чем проблема то?"

и я тупо подумал "для кого придумали CSS displey блять!" и тупо просто заверстал сохранив семантку) спасибо тимми

да и неприятно как то , я же не таблицу делаю а меню навигации. тег table не при чем и больше похож на кастыль

Да ерунда, но если настаиваешь могу дать номер счёта.

можно сделать для современных браузеров на flexbox, будет выглядеть так как и задумано, а для ie деградацию запилить с table-cell, будет выглядеть как получится ^^.

Tim,
лучше дай адрес своей мамы

Gozar,
у меня и в ie как задуманно) надо сорс?