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

Question

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

我已经为 ul 使用了样式

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

和李

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