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

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

HTML:

<div id="info_new_cont">
<ul id="info_new_ul">
    <li id="app_no_li">
        <div>
            <div id="app_no_title">Appn<br> No:</div>

            <div id="app_no" class="info_new_bottom">42382464</div>
        </div>
    </li>
    <li id="new_li">
        <div>mcs</div>
        <div id="new_case" class="info_new_bottom">New Case</div>
    </li>
    <li id="ifw_li">
        <div>ld</div>
        <div id="file_wrap" class="info_new_bottom">More Info</div>
    </li>
</ul>
</div>

вот стиль

#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;

}

Ответ 1

Удалить display: inline-block; from de #info_new_ul li

и используйте float:left для <li>.

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

Ваш JsFiddle, но обновленный с новым кодом

Ответ 2

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

#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