Sto cercando di generare un output simile a questo:orizzontale ordinato Lista (e IE)
1. One 2. Two 3. Three 4. Four
dal seguente codice HTML
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ol>
Sembra che Internet Explorer non vuole mostra il numero (voce dell'elenco) quando fai fluttuare i li per renderli orizzontali.
Qualcuno si è imbattuto in questo e ha trovato una soluzione che posso usare?
Questo codice funziona in tutti i browser che ho testato. Se non hai ancora trovato una risposta, il suggerimento sulla risposta più popolare è valido. Regola la larghezza se vuoi che si sposti.
<ol style="list-style-type:decimal; width: 600px;">
<li style="float: left; width: 200px; padding: 2px 0px;">Test</li>
<li style="float: left; width: 200px; padding: 2px 0px;">Test</li>
<li style="float: left; width: 200px; padding: 2px 0px;">Test</li>
</ol>
ol.horizontal{
list-style-type: decimal;
width: 600px;
}
ol.horizontal li{
float: left;
width: 200px;
padding: 2px 0px;
}
<ol class="horizontal">
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ol>
css:
li { display:inline; }
Questa soluzione consente di eliminare i numeri di elenco ordinati dagli elementi di IE, Firefox, Opera e Safari. Dalla sua domanda presumo che li voglia preservare. –
Potete usare questo CSS?
li {display: inline}
EDIT: Questo non mantiene la numerazione oggetto, e io non sono a conoscenza di alcun metodo che fa. Come sostituto, immagino che tutto quello che puoi fare sia inserire i numeri manualmente, fino a quando i browser avranno un supporto migliore per i contatori CSS.
Questa soluzione consente di eliminare i numeri di elenco ordinati dagli elementi di IE, Firefox, Opera e Safari. Dalla sua domanda presumo che li voglia preservare. –
Buon punto ... Vedrò se riesco a trovare qualcosa e modificarlo. –
Ho provato li {display: inline; list-style-type: decimal; } ma non ha avuto effetto nei browser elencati. –
non è possibile impostare una larghezza sugli elementi in linea. così io di solito finiscono per loro galleggiante invece
li
{
float: left;
width:30px;
}
Questa soluzione consente di eliminare i numeri di elenco ordinati dagli elementi in IE6, 7 e 8RC1, Google Chrome e Safari per Windows 3.2.2. Conserva i numeri di elenco ordinati in Firefox 2, 3 e 3.1b2. Dalla sua domanda presumo che li voglia preservare. –
Ho provato ogni proprietà display su this page e nessuno di loro preservare i numeri della lista ordinata quando si visualizza la lista orizzontalmente in IE (nè sono conservati in Firefox, Opera o Safari per Windows - e per estensione probabilmente Google Chrome, anche se ammetto che non ho testato tutte le proprietà display lì).
L'unica soluzione (solo parzialmente in Firefox) è Al W's answer.
Penso che se si desidera un elenco numerato orizzontale, sarà necessario generarlo sul server o manipolare l'elenco sul client utilizzando JavaScript per reinserire i numeri.
Quale versione di Firefox nasconde i numeri per te? Li vedo bene in FF3.0. Se questo è un bug o non è discutibile. –
@Bobby Quello che stavo dicendo è che i numeri delle liste ordinate non vengono conservati quando si usa 'li {display: inline; } '. Sono conservati in Firefox quando si usa 'li {float: left; larghezza: 30px; } '(come da risposta di Al W). –
Ho trovato utile this page about IE hasLayout. Comprende la discussione sulla formattazione di tali elenchi (il collegamento punta alla sezione elenchi della pagina)
Ok, è necessario aggiungere un attributo float, width e list-style-type al css. Sembra che questo:
li{
float:left;
width:50px;
list-style-type:decimal;
}
Gushiken
Non funziona in IE7 per me. Che DOCTYPE stai usando? –
Works. Come suggerimento, potresti voler aggiungere questa riga dopo la fine dell'elenco per evitare che il float interferisca con altri contenuti:
– LeeNon funziona su Chrome 26 – matheusvmbruno