Poprawa kodu - wyświetlanie w jednej linii.

wersja skryptu MyBB: 1.8
adres forum: obojetni.xaa.pl
na czym polega problem (screen, opis, komunikaty): Otóż napisałem kod na kwadrat/prostokąt z tekstem w środku wykorzystując kod na tabele.
Wygląda to tak:


Mój kod:

<table style="border: 0.75mm ridge #a7a7a7" width="90" height="90">
<tr>
    <td width="70" height="70"><center><font size="20"><font face="Times New Roman,serif"><b><font color="4b4b4b">Kom</font></b></font></center></td>
</tr>
</table> 


I chodzi o to, że chciałbym wstawić w jednej linijce takie 3 kwadraty, a między nimi jakiś tekst tak jak na obrazku niżej:


Czy ktoś mógłby podać mi prawidłowy kod? Gdy próbuję to zrobić, każdy element łamie się do osobnej linijki.

Snake_ napisał 24.03.2015, 09:15:
Poprawiam tytuł wątku.

Tak na szybko:

<div style="width: 100%; display: inline;">
    <ul class="menu_div">
        <li><div style="text-align: center; height: 90px; width: 90px; border: 0.75mm ridge #a7a7a7;">
                <div style="font-family: 'Times New Roman'; line-height: 90px; color: #4b4b4b; font-size: 30px; font-weight: bold;">Kom</div>
            </div><div style="float: left;margin-top: -90px;margin-left: 100px;">Tekst</div></li>
        <li><div style="text-align: center; height: 90px; width: 90px; border: 0.75mm ridge #a7a7a7;">
                <div style="font-family: 'Times New Roman'; line-height: 90px; color: #4b4b4b; font-size: 30px; font-weight: bold;">Kom</div>
            </div><div style="float: left;margin-top: -90px;margin-left: 100px;">Tekst</div></li>
        <li><div style="text-align: center; height: 90px; width: 90px; border: 0.75mm ridge #a7a7a7;">
                <div style="font-family: 'Times New Roman'; line-height: 90px; color: #4b4b4b; font-size: 30px; font-weight: bold;">Kom</div>
            </div><div style="float: left;margin-top: -90px;margin-left: 100px;">Tekst</div>
        </li>
    </ul>
</div> 


i CSS:

.menu_div li {
    list-style: none;
    float: left;
    width: 33.3%;
} 


Mógłbyś mi podać jeszcze kod składający się z jednej komórki i tekstu obok?

Analogicznie...

<div style="width: 100%; display: inline;">
    <ul class="menu_div">
        <li><div style="text-align: center; height: 90px; width: 90px; border: 0.75mm ridge #a7a7a7;">
                <div style="font-family: 'Times New Roman'; line-height: 90px; color: #4b4b4b; font-size: 30px; font-weight: bold;">Kom</div>
            </div><div style="float: left;margin-top: -90px;margin-left: 100px;">Tekst</div></li>
    </ul>
</div> 


Dzięki, zapomniałem zmienić w global CSS na width 100% dlatego mi się łamało.