水平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,以防万一你想看到它的实际效果.)