リストアイテムの水平方向の整列

Question

リストアイテムを水平方向に整列させたい。しかし、私はそれらを一本化していません。最初のliの中のbrタグを削除して完全に整列させると私は何が欠けていますか？助けてください。 jsfiddleコード - >here

HTML：

ここでは、あなたがのliタグのfloat:leftを使用する必要がありますスタイル

#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

デ#info_new_ul li

からdisplay: inline-block;を削除し、<li>ためfloat:leftを使用します。

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

あなた JsFiddleが、新しいコード

Answer 2

です。

#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