Ci sono alcune cose che non vanno bene. Ma l'hai provato seriamente o hai testato solo in qualche browser bacato?

Non ci puo` essere un elemento blocco all'interno di uno inline. forse non devi mettere inline il[*]

Il div lo hai definito 50% del body, ma se il body risulta stretto, ti scombina il tutto. Io definirei piu` largo:
width: 70%; /* o un valore ragionevole */
margin: o auto;
In tal modo le colonne saranno 2 o tre a seconda della larghezza dei singoli[*] all'interno dello spazio del <div>

Poi al body (o div che contiene il tutto) dovrai definire
text-align center;
per far centrare anche per il browser IE.

Per quanto riguarda il[*], la somma di 2% + 46% + 2% + eventuali bordi (che non hai azzerato) puo` essere maggiore di 50%, che ti fa stare una sola colonna.
Non credo ti convenga usare il padding, che viene interpretato diversamente da IE.
Inoltre 46% di qualcosa di stretto, se poi i caratteri sono larghi, potrebbe scombinare il tutto. Meglio sarebbe dare una larghezza fissa (rispetto al carattere), lasciando poi al browser inserire due o tre colonne a seconda della larghezza.
ul li {
width: 45%;
margin: 0 2% 1em 2%;
padding 0;
border 0;
float: left;
/*display: inline;*/
/* qui puoi metterci gli attributi per definire il punto o l'immagine*/
}