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

Question

我一直试图让 UL 通过执行“float:left”来水平显示 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，以防万一您想看到它的实际效果。）