始终在单行中显示水平菜单栏项

Question

我正在创建一个水平导航栏，动态获取其菜单项。但是我在水平显示列表项时遇到问题。只要列表项溢出列表容器的宽度，它们就会在容器内创建一个新行。我希望所有列表项始终显示在一行中。并且无论列表多长，用户都只会滚动菜单

我使用了ul的样式

ul{ 
    background-color:yellow;
   position:absolute;
    height:80px;
overflow:auto;
    list-style:none;
    display:table-row;
}

和li

li{
    margin:10px;
    display:inline-block;
}

Demo Fiddle

Answer 1

ul{ 
    background-color:yellow;
    height:80px;
    overflow-x: auto;
    overflow-y: hidden;
    list-style:none;
    white-space: nowrap;
}

Demo