Question

我正在寻找一种方法来防止水平，内联无序列表在包含在具有特定宽度（短于列表）的元素内时分成单独的行。元素的“溢出”设置为“隐藏”。

我发现创建该效果的唯一方法是给“UL”元素一个特定的宽度，但现在，我必须为宽度未知的列表创建该效果！（用户可以将项目添加到列表中）。还有其他方法吗？它会对我有所帮助!!

谢谢大家

Answer 1

您是否尝试在UL中添加“white-spacing：nowrap”？这可能会成功：http://www.w3schools.com/CSS/pr_text_white-space.asp

Answer 2

尝试这段代码来显示列表项

#list   {
        width:476px;
        height:40px;
        margin-top:40px;
        float:right;
    }

    #list ol    {
        padding:0;
        margin:10px 0px 0px 27px;
        float:left;
        display:inline;
    }

    #list li    {
        padding:0;
        margin:0;
        display:inline;
        float:left;
    }

Answer 3

试试这个：

ul.one-liner { white-space: nowrap; }
ul.one-liner li { display: inline }

Answer 4

<强> [See it in action]

#container {
  width: 100px; /* container's specific width */
  position: relative; 
  overflow: hidden;  
}

ul { 
  position: absolute;
  list-style-type: none; 
  width: 10000px;
}

ul li { 
  display: inline;
}

用CSS设计列表

4 个答案: