CSS中让同一个ul中的li标签在一行显示是一个常见需求,可以通过如下的几种方式实现。
/* 使用float属性 */
li {
float: left;
}
/* 使用inline属性 */
li {
display: inline;
}
/* 使用display: flex属性 */
ul {
display: flex;
}
li {
flex: 1;
}
/* 使用display: inline-block属性 */
li {
display: inline-block;
*display: inline; /* 兼容IE6~7 */
zoom: 1; /* 兼容IE6~7 */
}
以上是几种常见的方式,其中有两种是使用display属性,display属性是常用的CSS属性之一,它可以控制标签的显示方式。使用display属性可以将inline元素转换成block元素,反之也可以将block元素转换成inline元素,这样就能够控制标签的大小、位置及排列方式等。