Горизонтальное выравнивание элементов списка

Question

Я хочу выровнять элементы списка по горизонтали. Но я не получаю их в очереди. Если я удаляю тег br внутри первого li, тогда его выравнивание идеально. Что мне не хватает? пожалуйста помоги. jsfiddle код ->here

HTML:

здесь стиль

#info_new_cont { 

float: right; 

display: inline-block; 

width: 500px; 

height: 100%; 

margin: 0px; 

} 

#info_new_ul { 

list-style: none; 

margin: 0px; 

width: 400px; 

height: 140px; 

} 

#info_new_ul li { 

display: inline-block; 

padding: 5px; 

color: #fff; 

font-family: trebuchet ms; 

font-size: 19px; 

font-weight: lighter; 

text-align: justify; 

word-wrap:break-word; 

} 

.info_new_bottom { 
margin-top:30px; 
} 

#app_no_li { 

width: 120px; 

height: 120px; 

background-color: #00ddff; 

} 

#app_no_cont { 

white-space: nowrap; 

} 

#app_no_title { 

} 

#app_no { 

font-weight: bold; 

} 

#new_li { 

width: 120px; 

height: 120px; 

background-color: #eee; 

} 

#ifw_li { 

width: 120px; 

height: 120px; 

background-color: #eee; 

} 

Answer 1

Удалите display: inline-block; из де #info_new_ul li

и использовать float:left для <li>.

#info_new_ul li { 
    .... 
    float:left; 
} 

Ваш JsFiddle но обновляется с новым кодом

Answer 2

Вы должны использовать float:left для литий-тегов.

#info_new_ul li { 
    float:left; 
    margin-left: 2px; 
    padding: 5px; 
    color: #fff; 
    font-family: trebuchet ms; 
    font-size: 19px; 
    font-weight: lighter; 
    text-align: justify; 
    word-wrap:break-word; 
} 

DEMO