横向css列表包装问题

Question

我正在尝试实现一个css水平列表，如果容器div宽度较小，则不应该自行换行。例如，看看这个小提琴：

http://jsfiddle.net/s5PBZ/1/

正如你只能看到两个项目：Lorem Ipsum是可见的，因为Dolor的最后几个字母无法容纳在div中，因此列表被包裹。但我希望一切都在一条线上，即使有些文字被剪裁了。例如 - 我想要的输出是Lorem Ipsum Dol＆＃39;或其他任何文本的其余部分应溢出div。

我尝试了

的各种组合

white-space: nowrap;

display: inline-block;

float: left;

但无法达到预期的效果。

注意：我使用表格获得了结果，但我很想知道我在这里做错了什么。

编辑：我想我的帖子中并不清楚。我必须设置表格宽度，实际上用户将在运行时设置表格宽度，我有一个这样的界面。虽然设置ul宽度可以解决问题，但项目数量是完全动态的。所以我不能设置任何宽度。

Answer 1

只是做

.LongList ul li {
display: inline-block; /* add this , remove float and its done */
}

DEMO

Answer 2

您应该使用 overflow:hidden 和 display:inline-block 来解决此问题，

检查此 demo jsFiddle

CSS

.LongList ul {
        margin: 0;
        padding: 0;
        height: 21px;
        display: inline-block;
        overflow:hidden;
    }

您可以选中此选项，将 width: 150px 增加到 250px .LongList{} > ul 列出 display inline block 。

---

您可以使用 display:inline-block 类中的 .LongList ul li{} 进行归档的另一种方式，

检查此 Demo jsFiddle

.LongList ul li{
        display: inline-block;         // Add new
        float: left;                   // Remove this
 }

希望这对你有帮助！

Answer 3

我修复了你的小提琴并删除了不必要的规则。看看吧。

The fiddle

.LongList
{
margin: 0;
    display: block;
    height: 21px;
    padding: 5px;
    background: #fff;          
    border: 2px solid #000;
}

Answer 4

为什么你给了那个宽度

<table cellpadding="0" cellspacing="0" border="0" width="160px">

删除此宽度

并在css中，提供width:auto

.LongList
    {
    margin: 0;
            float: left;
            display: block;
            height: 21px;
            width: auto;
            overflow: hidden;
            padding: 5px;
            background: #fff;
            white-space: nowrap;            
            border: 2px solid #000;
    }