列表项的水平对齐方式

Question

我想水平对齐列表项。但我不是让他们排成一列。如果我删除第一个li内的br标签，那么它的对齐完美。我错过了什么？请帮忙。 jsfiddle代码 - ＆gt; here

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;

}

Answer 1

从de display: inline-block;

中删除#info_new_ul li

并使用float:left作为<li>。

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

您的JsFiddle，但使用新代码进行了更新

Answer 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