Html Css：如何修复li'；这是一行

我的李不在一条线上。我该如何解决这个问题？ 我需要有3列和在同一行。 我该怎么做？ 谢谢

我的HTML：

---

有人有解决方案吗？

方法1:使用flexbox，这是最干净、最现代的答案。你已经在其他地方使用了flex，你可以利用它的所有魔力

ul{
显示器：flex；
柔性包装：包装；
}
ulli{
弹性：1033.3%；
}

苹果
橙子
香蕉
梨
芒果
桃子
李子

像这样替换css代码

你的李在头球导航

nav ul li {
display:inline-block;
width: 30%;
}
nav li:nth-child(even){
   background-color: #A0C0FF;
  border-radius: 25px;
}
 nav li:nth-child(odd){
background-color: #F897CA;
border-radius: 25px;
margin-left: 1%;
}

---

您的css只在文章中显示样式li，但您的li在标题和导航中，而不在文章中。也许您应该重新组织代码并再次发布，如果您可以添加示例说明其显示方式。如果使用正确的前缀样式，IE11将正确显示。另外，方法2也不可取，因为使用inline/inline块会产生令人尴尬的“额外间距”。这就是为什么33.3%的人不为你工作的原因。方法一和方法三是好的+1谢谢你。我很少使用内联块、float和flex来更好地工作，但我把它留给OP去探索。

    article ul li {
    display:inline-block;
    width: 30%;
}

article li:nth-child(even){
    background-color: #A0C0FF;
    border-radius: 25px;
}

article li:nth-child(odd){
    background-color: #F897CA;
    border-radius: 25px;
    margin-left: 1%;
}

figure img{
    width: 35%;
    display:block;
    margin-left:auto;
    margin-right: auto;
    margin-top: 1%;
}

figcaption{
    padding: 2%;
}

figure {
    display: flex;
    flex-direction: column;
    align-items: center;
}
article{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

nav ul li {
display:inline-block;
width: 30%;
}
nav li:nth-child(even){
   background-color: #A0C0FF;
  border-radius: 25px;
}
 nav li:nth-child(odd){
background-color: #F897CA;
border-radius: 25px;
margin-left: 1%;
}