水平UL列表未在同一行中显示LI项目

Question

我一直试图让UL通过“浮动：左”来水平显示LI项目。

float:left;
display:inline; 

以下是示例 - http://jsfiddle.net/Ku9Bm/1/

如您所见，它显示LI项目水平排列完美。

但是如果我向其中一个LI项添加更多文本，UL列表会垂直显示LI项目。

以下是此示例 - http://jsfiddle.net/3DGfL/2/

即使一个LI项目有更多内容，我怎样才能在同一行显示LI项目？

Answer 1

获得您正在寻找的行为（我认为）的另一种方法可能是使用不同的显示属性。您可以尝试使用此样式替换为ul.entries li定义的当前样式：

ul.entries li {
    display:table-cell;
}

如果您希望列表项更宽以减少自动换行，您也可以在其中添加min-width。现在，无论宽度如何，您的水平列表项都将保持在同一行，如果内容要求它们分成其他行，则不会包含以前的列表项。

我希望这会帮助你！祝好运。 （这是一个JSFiddle，以防你想看到它的实际效果。）