问题 列表项的水平对齐方式


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

}

7987
2017-09-26 21:55


起源

我有一个问题,为什么显示:内联不起作用?我尝试过,但我不明白原因 - Fernando Gabrieli


答案:


删除 display: inline-block; 来自德 #info_new_ul li 

并使用一个 float:left 为了 <li>

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

你的 的jsfiddle 但更新了新代码


11
2017-09-26 22:02



谢谢您的帮助。 :) - Serjical Kafka
没问题,总是很乐意提供帮助 - C Travel


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


4
2017-09-26 22:00