ugrás a tartalomhoz

Sorkizárt, de nem sortörő elemek

cworek · 2007. Dec. 4. (K), 20.14
Sziasztok!

A köv. problémám akadt:

Van egy dobozom, amiben logikailag egybe tartozó elemeket szeretnék kirakni ciklussal, ezeknek az elemeknek nem szabadna törniük. A megálmodott végeredmény valami ilyesmi lenne:
  1. --------------------------------------------------------------------------------------  
  2. I                                                                                     I  
  3. I  1. termék <input>             2. termék <input>                  3. termék <input> I  
  4. I                                                                                     I  
  5. I  4. hossúnevű termék <input>                     5. nagyonhosszúnevű termék <input> I  
  6. I                                                                                     I  
  7. ---------------------------------------------------------------------------------------  
A termékek neve persze változó hosszúságú, mellette egy darabszám inputtal.

Jelenleg a köv css alkalmaztam:
  1. .new-spices {  
  2.   
  3.   text-align: justify;  
  4.   border: 1px solid #D1824A;  
  5.   background: #F2E9CA;  
  6.   margin-top: 2px;  
  7.   margin-right: 10px;  
  8.   padding-right: 5px;  
  9.   padding-left: 5px;  
  10.   padding-top: 5px;  
  11.   font-weight: bold;  
  12. }  
  13.   
  14. .spiceblock {  
  15.   display: inline;  
  16.   text-align: left;  
  17.   white-space: nowrap;  
  18. }  
  19.   
  20. .spiceblock input {  
  21.   font-size: 9px;  
  22.   padding: 1px;  
  23.   width: 14px;  
  24. }  
ahol a new-spices a külső doboz, a spiceblock pedig a belső inline div-ek:
  1. <div class="new-spices">  
  2.   <div class="spiceblock">  
  3.     Ütvefúrós agytáp <input name="bla">  
  4.   </div>  
  5.   <div class="spiceblock">  
  6.     Ütvefúrós agytáp <input name="bla">  
  7.   </div>  
  8.   <div class="spiceblock">  
  9.     Ütvefúrós agytáp <input name="bla">  
  10.   </div>  
  11.   <div class="spiceblock">  
  12.     Ütvefúrós agytáp <input name="bla">  
  13.   </div>  
  14.   <div class="spiceblock">  
  15.     Ütvefúrós agytáp <input name="bla">  
  16.   </div>  
  17.   <div class="spiceblock">  
  18.     Ütvefúrós agytáp <input name="bla">  
  19.   </div>   
  20. </div>  
Az eredmény lehangoló, sem IE, sem Fox nem csinálja azt amit szeretnék. IE megcsinálja a justify-t, de alkalmazza a belső spiceblock-ra is, hiába kértem, hogy white-space: nowrap;
A Fox viszont egy blokként kezeli az egy sorba kiférő elemeket, és eldobja a justify-t, és balra rendez.

Ha beszúrok a html-be egy
  1. &nbsp;  
-t minden spiceblock után, gondolván, hogy annak mentén a fox tudja sorkizárni az elemeket, teljes káosz alakul ki mindkét böngészőben.

Van ötletetek, megoldásotok ilyen problémára. Egy sorban 2 vagy három spiceblock fér ki, szeretném, ha a böngésző döntené el, hogy hol töri a sort (persze nem a spiceblock közepén), és nem szeretném meghatározni hogy mondjuk csak két oszlopban lehetnek az elemek, mert a designer ezt kérte:-)

Köszönöm!
‹ Frissítés iframe-ből Pontatlanul illeszkedő képek Firefox alatt ›
 ■