列表项的水平对齐方式

Question

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

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

删除display: inline-block;de#info_new_ul li

并使用float:left的<li>.

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

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

Answer 2

你应该使用float:leftli标签.

#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