Ciao,
ho una serie di icone che mi rappresentatano un drop down menu(Action Item menu) ottenuto tramite una lista e contenuto in un div padre.
Tale menu puo' essere posizionato in punti diversi del portale e l'obiettivo è mantenere sempre le icone su un'unica linea. Utilizzando float per ottenere il menu a tendina, capita che quando lo spazio è ridotto (specialmente se il menu è posizionato all'interno di una cella di una tabella) le icone si dispongono su due file.
Il caso è complesso perchè non so a priori il numero delle icone (quindi larghezza div padre) e le regole CSS devono essere uguali a prescindere da dove il menu venga posizionato.
Sapreste dirmi come posso forzare il div padre a non restringersi e a mantenere le icone su un'unica fila?
Grazie
codice:<div class="WPActionMenuContainer"> <div class="menu WPActionMenu"> <ul>[*] <input type="image" />New Folder [*] <input type="image" />Edit Folder [/list] </div></div> /*---------------------- CSS ---------------------------------------*/ .WPActionMenu { float:right; margin:0 !important; padding:0; min-height:0; } .WPActionMenuContainer { min-height:0; padding-top:8px !important; } .WPActionMenu:after, .WPActionMenuContainer:after { content: "."; height: 0; display: block; visibility: hidden; overflow: hidden; clear: both; } /* Da qui le regole generali per tutti i menu del portale */ .menu ul, .menu ul ul { margin: 0; padding: 0 3px 0 0; border: 0; list-style-type: none; display: block; } /* move all list items into one row, by floating them */ .menu ul li { margin: 0; padding: 0; border: 0; display: block; float: right; } .menu ul li:hover { position: relative; } .menu li li { width: 98%; padding:1px 0; text-align:left; display:block; } /* fix the position for submenus */ .menu ul li div{ top: 0; right: 0; } /* initialy hide all sub menus */ .menu ul li div { visibility: hidden; position: absolute; z-index: 10; } /* display them on hover */ .menu li:hover>div { visibility: visible; } /* -- float.clear -- force containment of floated LIs inside of UL */ .menu ul:after, .menu ul ul:after { content: "."; height: 0; display: block; visibility: hidden; overflow: hidden; clear: both; } .menu ul ul { width:115px; padding: 2px 2px 3px 28px; /*The SMALL_left faux col is 25px wide*/ overflow:hidden; /*To hide the overflowing divisor line*/ } .menu ul li a, .menu ul li a:hover { margin-left:2px; display:inline; }

Rispondi quotando