列表项目的水平对齐

我想水平对齐列表项目。但我没有把他们排在一行。如果我删除第一个里面的br标签，然后完美对齐。我错过了什么？请帮忙。的jsfiddle代码 - >here 列表项目的水平对齐

HTML：

这里是风格

#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; 

}

来源

2013-09-26 Serjical Kafka

我有一个问题，为什么更新显示：内联不起作用？我试过了，但我不明白 –

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

，并使用float:left为<li>。

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

你JsFiddle但随着新代码

来源

2013-09-26 22:02:36

感谢您的帮助。 :) –

没问题，总是乐意帮忙 –

你应该为李标签使用float:left。

#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

来源

2013-09-26 22:00:51 ocanal

列表项目的水平对齐

回答

相关问题