15

我想水平对齐列表项。但我没有让他们排成一行。如果我删除第一个 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;

}
4

2 回答 2

15
于 2013-09-26T22:02:36.637 回答
7

你应该使用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;
}

演示

于 2013-09-26T22:00:51.423 回答