Căn chỉnh ngang các mục danh sách

Question

Tôi muốn căn chỉnh các mục danh sách theo chiều ngang. Nhưng tôi không nhận được chúng trong một dòng. Nếu tôi loại bỏ các thẻ br bên trong li đầu tiên sau đó nó sắp xếp hoàn hảo. Tôi đang thiếu gì? Hãy giúp tôi. jsfiddle mã ->here

html:

đây là phong cách

#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

Xóa display: inline-block; từ de #info_new_ul li

và sử dụng một float:left cho <li>.

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

bạn JsFiddle nhưng cập nhật với mã mới

Answer 2

Bạn nên sử dụng float:left cho thẻ 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